JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='menagerie_sales_box'>
<div class='menagerie_sales_section' style='width:110px;'>
<img src='' style='width:100px;height:100px;'>
</div>
<div class='menagerie_sales_section' style='width:250px;'>
<b>NAME</b><br>{$sex} {$breed}<br>Age: {$age} - Breedings: {$breedings}
</div>
<div class='menagerie_sales_section' style='width:400px;'>
  <div class='menagerie_sales_moves' style='width:180px;'>{$move1}</div>
  <div class='menagerie_sales_moves' style='width:180px;'>{$move2}</div>
  <div class='menagerie_sales_moves' style='width:180px;'>{$move3}</div>
  <div class='menagerie_sales_moves' style='width:180px;'>{$move4}</div>
</div>
<div class='menagerie_sales_section' style='width:130px;'>
{$price} ()<br>{$buybtn}
</div>

</div>

CSS

.menagerie_sales_box {width:900px;background-color:white;border:1px solid grey;border-radius:5px;padding:5px;min-height:100px;}

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

.menagerie_sales_moves {padding:5px;border:1px solid grey;border-radius:5px;margin:0px auto 5px auto;display:inline-table;}