JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='menagerie_profile_top'>
<div class='tablecell' style='width:570px;'>
	    
      <div class='tablecell' style='width:60px;'>{$prevlink}</div>
      <div class='tablecell' style='width:400px;'><b><span class='menagerie_crittername'>{$critter->name}</span></b></div>
      <div class='tablecell' style='width:60px;'>{$prevlink}</div>
	    
	    

<div class='bit'>Breed: {$breed}</div>
<div class='bit'>Sex: {$sex}</div>
<div class='bit'>Age: {$stage}</div>
<div class='bit'>Keeper: {$ownerlink}</div>
<div class='bit'>Breeder: {$breederlink}</div>

<div class='bit'>Born: {$breffffffed}</div>
<div class='bit'>Breedings: XX/20</div>
<div class='bit'>For sale: Yes (XXXXX) O</div>
<div class='bit'>Griffin: {$ownerliiiiink}</div>
<div class='bit'>Breeder: {$breederlink}</div>
</div>

    
	<div class='tablecell' style='width:300px;'>
  <img src='../../critter/{$id}' style='width:300px;height:300px;'></div>
</div>

CSS

body {text-align:center;}
div {box-sizing:border-box;}
.menagerie_profile_top {width:890px;}

.menagerie_profile_title {height:45px;border:1px dotted green;}

.tablecell {display:table-cell;vertical-align:top;border:1px dotted red;}

.blah {width:550px;min-height:200px;border:1px dotted blue;margin-top:10px;padding:5px;}

.bit {border:1px solid grey;border-radius:5px;padding:5px;margin:3px;text-align:left;width:250px;display:inline-table;vertical-align:top;}