divで横並び

<!--divで横並び------------------>  

      <div class="wrapper">
        <div class="left">
          <img src="img/recipe.jpg" alt="">
        </div>
        <div class="right">
        </div>
      </div>
 

/*--divで横並び------------------*/
  .wrapper {
    display: flex;
  }

  .wrapper .left {
    width: 50%;
    background-color: rgb(204, 113, 143);
    height: 700px;
  }
 
  .wrapper .image img {
    width: 100%;
    object-fit: cover;
    background-color: rgb(31, 218, 62);
  }

  .wrapper .right {
    background-color: aqua;
    width: 50%;
  }