JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://trisha-new-site-fredinbed.c9users.io/libs/css/bootstrap.min.css">
<link rel="stylesheet" href="https://preview.c9users.io/fredinbed/trisha-new-site/libs/css/custom-sheet.css">
<div class="cart-item row">
<div class="col-3 cart-item-image adjust-img debug" style="background-image: url('https://trisha-new-site-fredinbed.c9users.io/libs/images/shop/highlighter/IMG_0784.PNG');"></div>
<div class="col-4">
<div class="row">
<div class="col-12 font-weight-bold">Ani Beauty Highlighters</div>
<div class="col-12">Style: Ice</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col-sm-6 col-12 font-weight-bold">Quantity: 1</div>
<div class="col-sm-6 col-12 font-weight-bold">$18.95
<a href="#" id="edit-$loop" class="edit text-center" style="position:absolute;color:#555;bottom:0;padding-left:15px;">Edit</a>
</div>
</div>
</div>
<div class="col-1">
<button id="item-$loop" type="button" class="close row" style="margin-top:0.25rem;margin-right:0.25rem;margin-bottom:25px;" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
CSS
.cart-list {
padding: 5px;
}
.cart-item {
margin-top: 10px;
padding: 5px;
min-height: 100px;
background-color: #FFE8E8;
}
.order-summary {
margin-top: 10px;
padding: 25px;
background-color: #FFE8E8;
}
.shop-item p,
.cart-item h4 {
color: black;
}
.cart-item a {
text-decoration: none;
}
.cart-item .desc {
position: relative;
display: block;
display: -webkit-box;
max-width: 100%;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.cart-item-image {
height: 100%;
width: 90px;
}
.cart-list .row {
margin-left: 0;
}