<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div cass="row"> <div class="form-card"> <div class="row-product"> <div class='form-group'> <div class="col-sm-6"> <label class="control-label col-sm-12" for="name-input-field" id="product-label">Product Name</label> <div class="col-sm-12" id="label-product">DSLR Camera</div> <div class="col-sm-6" id="list-product-desc-3"> <label class="control-label">Product Quantity</label> <select name="quantity" class="form-control locked" id="product-qty"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="col-sm-6"> <label class="control-label">Product Price</label> <div class="product-price">Rp. <strong class="" id="calc-product-price">5225000</strong></div> </div> </div> <div class="col-sm-6"> <div class="product-image"> <img src="https://managix.id/tools/landingpage/assets/images/uploads/WfsIjPwCqtJiB9f.jpeg" style="width: 100%"/> </div> </div> </div> </div> </div> </div> </div>

.row-product { background: #f5f5f5; margin-bottom: 30px; } #label-product { padding-top: 5px; padding-bottom: 15px; font-weight: bold; } .product-price { padding-top: 6px; } .row-product label { font-weight: normal; } .product-image { width: 250px; border: 1px dashed #ddd; padding: 10px; } .product-text { margin-top: 30px; }