JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="Product">
<div class="ProductInfoWrapper">
<div class="ItemIdAndImage">
<a class="ItemDetailsLink" href="default.aspx?page=item%20detail&itemcode=45-12"> <div class="ProductImgWrapper"><img src="#" class="ItemSearchResults_Thumbnail_new"></div></a>
<a class="ItemDetailsLink" href="default.aspx?page=item%20detail&itemcode=45-12"><div class="MobileItemDetails">See Item Details</div></a>
</div><!--
--><div class="ProductDesc">
<a class="ItemDetailsLink" href="default.aspx?page=item%20detail&itemcode=45-12"> <p>MOLDEX N95 RESPIRATOR W VALVE 10/BX</p></a>
<div class="ItemId" id="0">
<span><b>Item ID:</b></span> <a class="ItemDetailsLink" href="default.aspx?page=item%20detail&itemcode=45-12" style="display: inline-block">45-12</a><br>
<span><b>Stock:</b></span> <span><font class="ItemSearchResults_Availability">In Stock</font></span>
<input type="hidden" name="txtItemID0" value="45-12">
<input type="hidden" name="RowNumber0" value="45-12">
</div>
<a class="ItemDetailsLink" href="default.aspx?page=item%20detail&itemcode=45-12"><div class="ItemDetails">See Item Details</div></a>
</div>
</div><!--
--><div class="ProductDetailsButtonsWrapper">
<div class="ProductDetails">
<span class="Label"><b>UOM</b></span>
<select name="selUOM0">
<option value="BX/1.0000" selected="">BX</option>
<option value="CS/10.0000">CS</option>
</select>
<input type="hidden" name="UOM" value="BX">
<input type="hidden" name="UnitSize" value="1.0000">
</div><!--
...
CSS
.ItemIdAndImage {
display: inline-block
}
.ItemId {
padding: 10px 0px 0px 10px;
display: inline-block;
}
.ProductInfoWrapper {
width: 51%;
display: inline-block;
}
.ProductImgWrapper {
width: 100px;
height: 100px;
margin: 20px 0px 0px 10px;
border: 3px solid #d7d7d7;
text-align: center;
background-color: #fff;
position: relative;
}
.ProductImgWrapper img {
box-sizing: border-box;
max-height: 100px;
max-width: 100px;
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
margin: auto;
}
.ProductDesc {
display: inline-block;
vertical-align: top;
width: 66%;
height: 155px;
position: relative;
text-align: left;
}
.ProductDescResponsive {
width: 56% !important;
}
.ItemId {
padding-left: 10px;
}
.Vendor {
padding-left: 10px;
text-align: left;
}
.CallIfAvail {
line-height: 20px;
position: relative;
top: 10px;
width: 85px;
display: block;
}
.CallForPrice {
line-height: 17px;
position: relative;
top: 5px;
width: 64px;
display: block;
}
.ProductDesc p {
padding-left: 10px;
margin-bottom: 0px;
}
.ItemDetails {
padding-left: 10px;
font-style: italic;
color: #808080;
position: absolute;
bottom: 6px;
}
.ItemDetailsLink p {
font-weight: bold;
}
.ItemDetails:hover {
text-decoration: underline;
}
.ItemDetailsLink, .ItemDetailsLink:hover, .ItemDetailsLink:active, .ItemDetailsLink:visited {
color: #000;
display: block;
}
.ItemDetailsLink:hover {
text-decoration: underline;
}
.ProductDetailsButtonsWrapper {
display: inline-block;
width: 48.94%;
vertical-align: top;
height: 155px;
position: relative;
}
.ProductDetails, .MobileProductDetails {
display: inline-block;
width: 24.99%;
line-height: 60px;
text-align: center;
}
.Label, .QuantityWrapper, .UOMWrapper, .ItemPrice, .MobileItemDetails {
display:...
JavaScript
$('.ProductDetails select').change(function () {
location.reload();
});