JSFiddle - React, Tailwind, and code Playground
HTML
<div id="find_a_dealer">
<div id="top_bar">
<table>
<tr>
<td class="select_dealer">Select a dealer to ship your rifle to</td>
<td class=question_mark>?</td>
</tr>
</table>
<input type="text" name="enter_dealers_address" placeholder="Enter dealers address or a zip code in your area" value="" />
<button>SEARCH</button>
</div><!--end of top_bar-->
<div id="left_bottom_bar">
<table>
<tr>
<td class="a">A</td>
<td class="dealer_name" name="dealer_name">Dealer Name</td>
<td class="number_miles" name="number_miles">2.4 miles</td>
</tr>
<tr>
<td class="dealer_address">5699 Commerce Dr Murray, UT 84107</td>
</tr>
<tr>
<td>Choose Dealer</td>
</tr>
</table>
</div><!--end of left_bottom_bar-->
<div id="right_bottom_bar">
</div><!--end of right_bottom_bar-->
</div><!--end of find_a_dealer-->
CSS
#find_a_dealer {
width: 740px;
height: 557px;
background-image: url('https://deserttech.com/images/find_a_dealer.png');
background-repeat: no-repeat;
}
#top_bar {
height: 19.5%;
border: solid 1px red;
padding-left: 6%;
/* background-color: black; */
}
#top_bar table {
height: 8px;
margin-top: 13px;
}
.select_dealer {
width: 346px;
/* border: solid 1px blue; */
color: white;
// padding: 15px 0px 0px 4px;
font-size: 20px;
}
.question_mark {
border-radius: 50%;
width: 22px;
height: 8px;
/* padding: 7px; */
background: #ADADAD;
border: 1px solid #ADADAD;
color: black;
text-align: center;
font: 18px Arial, sans-serif;
}
#top_bar > input {
width: 544px;
height: 31px;
margin-top: 9px;
margin-left: 5px;
border: solid 1px white;
background-color: black;
font-size: 16px;
}
#top_bar > button {
width: 90px;
height: 35px;
background-color: #D15B00;
border: solid 1px #D15B00;
color: white;
}
#left_bottom_bar {
float: left;
width: 46%;
height: 80%;
border: solid 1px blue;
}
#left_bottom_bar table{ //this is A which is next to dealer name
border: solid 1px red;
margin: 0px 0px 0px 47px;
}
.a{
float: left;
border: solid 1px black;
width: 27px;
height: 28px;
text-align: center;
margin-top: 10px;
background-color: #0686AF;
color: white;
}
.dealer_name{
float: left;
/* border: solid 1px orange; */
margin: 9px 0px 0px 9px;
font-size: 14px;
}
.number_miles{
float: right;
/* margin: 5px 0px 0px 98px; */
}
.dealer_address{
/* border: solid 1px brown; */
float: right;
width: 130px;
margin: -15px 5px 0px 0px;
}
#right_bottom_bar {
float: right;
height: 80%;
width: 53% ;
border: solid 1px purple;
}