<div class="container d-flex justify-content-center">
<div class="card p-2 card-1 rounded">
<div class="row justify-content-between p-2">
<div class="col-auto">
<div class="text-left">
<h5 class="mb-0 font-weight-bold">May mango more</h5>
<h6>Buy 1kg and Get 1kg FREE</h6>
</div>
</div>
<div class="col-auto text-center ml-auto">
<div class="ml-auto mb-1 offer "><img class="irc_mi" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1576250904/makefg.php.png" width="22" height="22"> </div>
<h6>Offer</h6>
</div>
</div>
<div class="row">
<div class="col">
<div class="card card-inner">
<div class="media flex-column flex-sm-row p-2 mt-3"><img class="align-self-center mr-3 img-fluid" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1576250924/41XP4PjCliL.jpg" width="120" height="120">
<div class="media-body">
<p class="mt-0 mb-3 ">Mangoes alphonoso kashmiri</p>
<div class="row">
<div class="col-auto font-weight-bold"> ₹220 </div>
<div class="flex-col"> <small> <del class="text-muted">300</del> </small></div>
<div class="col-auto"><small class="text-success font-weight-bold">₹80 off </small></div>
</div>
<div class="row mt-4 no-gutters mx-auto">
<div class="col-auto mr-2"> <select class="custom-select custom-select-lg font-weight-bold">
<option selected>2 Kg</option>
<option value="1">5 Kg</option>
<option value="2">10 Kg</option>
</select> </div>
<div class="col-auto"> <button type="button" class="btn btn-outline-dark btn-lg text-primary font-weight-bold add-item-btn"> Add to cart</button></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
body {
background: #eee
}
.container {
margin-top: 100px
}
h6 {
font-size: 13px !important
}
.card {
background-color: orange;
color: white
}
.card-inner {
position: relative !important;
width: -webkit-fill-available;
background-color: #fff;
color: black !important
}
.btn-lg {
width: -webkit-fill-available !important;
border-color: rgb(216, 216, 216);
font-size: 15px !important;
padding: 13px 27px
}
.custom-select-lg,
.btn:focus,
.btn:active {
outline: none !important;
box-shadow: none !important
}
.btn-outline-dark:hover {
color: #fff !important;
background-color: #f4a540 !important;
border-color: #f4a540 !important
}
.dropdown-toggle::after {
margin-left: 1.255em;
vertical-align: 0.255em
}
.custom-select-lg {
height: calc(2.1em + 0.5rem + 12px);
font-size: 15px !important;
padding-right: 4rem
}