JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">
<div class="calContLeft"><div class="calTit">Bridging Loan Calculator</div><div class="calLeft">
  <div class="rbit">&nbsp;</div><div class="lbit">&nbsp;</div><div class="label">Bridging Loan Amount Required</div>
  <div class="clear"></div>
  
  <a href="#"><div class="help">?</div></a><div class="pnd">£</div><div class="frm"><input type="text"></div>
  <div class="clear"></div>
  
<div class="rbit">&nbsp;</div><div class="lbit">&nbsp;</div><div class="label">Term Required</div>
<div class="clear"></div>
  
  <a href="#"><div class="help">?</div></a><div class="pnd">&nbsp;</div><div class="frm"><select class="calput" id="term" name="term" size="1">
<option value="1">1 Month</option>
<option value="2">2 Months</option>
<option value="3">3 Months</option>
<option value="4">4 Months</option>
<option value="5">5 Months</option>
<option value="6">6 Months</option>
</select></div>
<div class="clear"></div>

  <div class="rbit">&nbsp;</div><div class="lbit">&nbsp;</div><div class="label">Monthly Interest Rate</div>
  <div class="clear"></div>
  
  <div class="help">%</div><a href="#"><div class="pnd">?</div></a><div class="frm"><input type="text" class="textr" value="0.54"></div>
  <div class="clear"></div>
  
  <div class="rbit">&nbsp;</div><div class="lbit">&nbsp;</div><div class="label">Properties used as security</div>
<div class="clear"></div>
  
  <a href="#"><div class="help">?</div></a><div class="pnd">&nbsp;</div><div class="frm"><select class="calput" id="term" name="term" size="1">
<option value="1">1 Property</option>
<option value="2">2 Property</option>
<option value="3">3 Property</option>
<option value="4">4 Property</option>
<option value="5">5 Property</option>
<option value="6">6 Property</option>
</select></div>
<div class="clear"></div>

<div class="rbit">&nbsp;</div><div class="lbit">&nbsp;</div><div class="label">Property 1: Value</div>
  <div class="clear"></div>
  
  <a href="#"><div class="help">?</div></a><div...

CSS

.container {margin:auto;font-family:arial;font-size:14px;max-width:768px;}
.calContLeft {float:left;background-color:#fff;width:49.5%;margin-right:0.5%;}
.calContRight {float:left;background-color:#fff;width:49.5%;margin-left:0.5%;}
.calLeft {padding:10px;}
.calRight {font-size:16px;}
.calTit {background-color:#ccc;color:#fff;text-indent:10px;padding:5px 0;font-weight:bold;margin-bottom:10px;font-size:16px;}
.other {background-color:#ccc;color:#fff;text-indent:10px;font-weight:bold;padding:2px 0;}
.clear {clear:both;}
.pnd, .lbit {float:left;}
.help, .rbit {float:right;}
.rbit, .lbit {width:30px;}
.pnd, .help {line-height:40px;height:40px;width:30px;text-align:center;background-color:#ccc;}
.label {font-size:16px;margin-bottom:2px;}
.frm {height:38px;overflow: hidden;border:1px solid #ccc;padding:0 10px;background-color:#fff;margin-bottom:10px;}
.frm input, .frm select {width:100%;border:0;margin:0;font-size:16px;}
.frm input {height:37px;}
.frm select {height:39px;border:0px;outline:0px;-webkit-appearance: none;-moz-appearance: none;text-indent: 1px;text-overflow: '';background-color: transparent;}
.textr {text-align:right;}
input:focus,select:focus{outline: none;}
select::-ms-expand,input::-ms-clear {display: none;}
select:focus::-ms-value {background-color: white; color:#000;}

@media screen and (max-width:768px){ 
.calContLeft, .calContRight {float:none;width:100%;margin:0;}
.label,.calRight,.calTit {font-size:14px;}}