JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<div class="container">
    <div class="box">
        <div class="float"></div>
    	<table>
		<tr><td></td><td></td><td></td><td></td></tr>
		<tr>
		<td colspan="2"><span class="title">Auteur: </span>Onbekend</td>
		<td><span class="title">Formaat: </span>37 x 23 cm</td>
		<td><span class="title">Prijs: </span>1900</td>
		</tr>
		<tr>
		<td colspan="2"><span class="title">Uitgever: </span>Pieter Jacob Paets Jan Moerentorf</td>
		<td><span class="title">Jaar v. uitgave: </span>1646</td>
		<td><span class="title">Aantal pg: </span>4 + 1265 +1 +468</td>	
		</tr>
		</table>
</div>


<div class="box">
<div class="float"></div>
<table>
		<tr><td></td><td></td><td></td><td></td></tr>
		<tr>
		<td colspan="2"><span class="title">Auteur: </span>Amelotto Della Houssaia</td>
		<td><span class="title">Formaat: </span>test</td>
		<td><span class="title">Prijs: </span>200</td>
		</tr>
		<tr>
		<td colspan="2"><span class="title">Uitgever: </span>ieter Jacob Paets Jan Moerentor</td>
		<td><span class="title">Jaar v. uitgave: </span>0</td>
		<td><span class="title">Aantal pg: </span>246242</td>	
		</tr>
		</table>
        
    </div>
</div>

CSS

.container{max-width:880px;background-color:blue;}
.box{padding:10px 0px;height:150px;width:100%}
.float{float:left;margin:0px 0px 0px 0px;display:block;width:31%;height:100px;background-color:yellow;}

table{width:69%;height:100px; font-size:1em;margin:0px 0px 0px;empty-cells:hide;background-color:green;float:right;}
table td{width:25%;}
.title{color:#b02a0a;}