<div class="container m-auto">
  <div class="m-4 mainWindow shadow bg-white-rounded p-1">
    
    <!-- Window 1-->
    <div class="d-flex flex-row flex-no-wrap bg-1">
      <!-- Product Image Section-->
      <div class="flex-grow-1 m-2">
      <img class="product-img p-2" src="https://images-na.ssl-images-amazon.com/images/I/91Rd6IjcSWL.jpg">
      </div>
      <!-- Product Image Section-->
      
      <!-- Product Desc Section-->
      <div class="flex-grow-1 m-2 p-1">
        <div class="d-flex flex-column">
          <div class="desc p-1 d-flex justify-content-between">
            <h4> Name<h4>
              <h4>$200.00<h4>
          </div>
          <div class="seller-name p-1">
            <small>ABC ltd.</small>
          </div>
          <div class="item-desc">
            In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
          </div>
          <div class="btn-group sizes mt-3 mb-2 pr-1">
            <button type="button" class="btn btn-xs btn-outline-primary">S</button>
             <button type="button" class="btn btn-xs btn-outline-primary">M</button>
             <button type="button" class="btn btn-xs btn-outline-primary">L</button>
          </div>
          <div class="sizes mt-1 pr-1">
            <button type="button" class="btn btn-xs mb-1 btn-warning">Add btn</button>
             <button type="button" class="btn btn-xs mb-1 btn-primary">Wishlist btn</button>
          </div>
            
        </div> 
      </div>
      <!-- Product Image Section--> 
    </div>
    
    <hr class="light m-auto mr-2 ml-2"></hr>
    
    <div class="d-flex flex-column bg-2 mt-2">
      <div class="p-2 viewMore">
        <strong>You might want to check these out..</strong>
      </div>
      <div class="p-1 relatedItems">
        <div class="d-flex flex-start">
          <div class="relatedCards m-1 bg-white-rounded">
            <img class="relatedCards-img" src="https://images-na.ssl-images-amazon.com/images/I/91Rd6IjcSWL.jpg">
            <div class="related-details d-flex">
              <p class="related-name"><small>My Neighbor</small></p>
              <div class="related-price float-right">50$</div>
            </div>
          </div>
          <div class="relatedCards m-1 bg-white-rounded">
            <img class="relatedCards-img" src="https://images-na.ssl-images-amazon.com/images/I/91Rd6IjcSWL.jpg">
            <div class="related-details d-flex">
              <p class="related-name"><small>My Neighbor</small></p>
              <div class="related-price float-right">50$</div>
            </div>
          </div>
          <div class="relatedCards m-1 bg-white-rounded">
            <img class="relatedCards-img" src="https://images-na.ssl-images-amazon.com/images/I/91Rd6IjcSWL.jpg">
            <div class="related-details d-flex">
              <p class="related-name"><small>My Neighbor</small></p>
              <div class="related-price float-right">50$</div>
            </div>
          </div>
          <div class="relatedCards m-1 bg-white-rounded">
            <img class="relatedCards-img" src="https://images-na.ssl-images-amazon.com/images/I/91Rd6IjcSWL.jpg">
            <div class="related-details d-flex">
              <p class="related-name"><small>My Neighbor</small></p>
              <div class="related-price float-right">50$</div>
            </div>
          </div>
        </div>
      </div> 
    </div>
        
  </div>
</div>
body {
  margin: 0;
  background-color: #fff;
}

.bg-1 {
  height: 500px;
}

.mainWindow {
  background-color: #fff;
}

.product-img {
  max-width: 100%;
  max-height: 100%;
}

.item-desc {
  width: 100%;
  height: 100%;
  text-overflow: ellipsis;
}
.item-desc  {
  text-indent: 15%;
  text-justify: inter-word;
}
.relatedCards {
  width: 100%;
  height: 150px;
  cursor: pointer;
  img {
    width: 100%;
    height: 80%;
  }
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js