JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<body>
<div id="page">
<div class='main'>
<div class="panel" id='panel'>
<div class="leftPanel" id='leftPanel'>
<p class="flip" id='acura'>Acura</p>
<p class="flip" id='buick'>Buick</p>
<p class="flip" id='chevrolet'>Chevrolet</p>
<p class="flip" id='dodge'>Dodge</p>
<p class="flip" id='ford'>Ford</p>
<p class="flip" id='gm'>GM</p>
<p class="flip" id='honda'>Honda</p>
<p class="flip" id='jeep'>Jeep</p>
<p class="flip" id='lincoln'>Lincoln</p>
<p class="flip" id='mazda'>Mazda</p>
<p class="flip" id='nissan'>Nissan</p>
<p class="flip" id='nissan'>Test</p>
<p class="flip" id='nissan'>Test</p>
<p class="flip" id='nissan'>Test</p>
<p class="flip" id='nissan'>Test</p>
</div>
<div class="rightPanel" id='rightPanel'>
<p>Make: This should describe the make of the car. It should be to the right of all those car make buttons. And there should be 3 images below this but still to the right of all those buttons, and furthermore, all three images should be side by side.</p>
<img clas='sideBySide'...
CSS
div.main
{
margin:0px;
padding:0px;
border:solid 1px red;
clear:both;
}
p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #000000;
width:100%;
clear:both;
}
div.panel
{
margin:0px;
padding:0px;
text-align:center;
background:#e5eecc;
border:solid 1px #000000;
height:500px;
clear:both;
}
div.leftPanel div.rightPanel
{
margin:0px;
padding:5px;
background:#e5eecc;
height:500px;
border:solid 1px #0f0000;
float:left;
}
div.leftPanel
{
width:10%;
}
div.rightPanel
{
width:50%;
}
div.rightPanel:hover
{
background:#cc00ff;
}
div.leftPanel:hover
{
background:#cc00ff;
}
p.flip:hover
{
background:#cc00ff;
}
img.sideBySide
{
float:left
}