JSFiddle - React, Tailwind, and code Playground

by ncapito

HTML

<div id="pedigree">



<div id="parentwrap">
<div class="parent">test</div>

</div>
<div id="childwrap">
<div class="child"><p>Am. Ch. Kenai's Aldebaran</p></div>
<div class="child"><p>pAm. Ch. Santa Clara Del Viento</p></div>
</div>

<div id="grandchildwrap">
<div class="grandchild">Am. Can. Ch. Ryzann's Eclipse at Kenai</div>
<div class="grandchild">Am. Ch. Timber Ridge's Abi of Kenai</div>
<div class="grandchild">Am. Ch. Sky Run Gavril Virtual Zip JC</div>
<div class="grandchild">Am. Can. Ch. Tazeb's Zena</div>
</div>

</div>

CSS

#pedigree {position: relative; width: 584px; height: 204px; margin: 0 auto; margin-top:    15px; padding-bottom: 15px; border-bottom: 1px dotted black;}



#parentwrap {position: relative; display: inline-block; margin: 0; width:auto; height: 205px; }

.parent {position: relative; width: 190px; height: 202px; margin: 0px; padding: 0px; border: 1px solid black;   }


#childwrap {position: relative; display: inline-block; margin: 0; width: auto; height: 205px; }

.child {position: relative; width: 190px; height: 95px; margin: 0px; padding: 0px; border: 1px solid black;  margin-bottom: 10px; }

#grandchildwrap {position: relative; display: inline-block; width: auto; height: 205px;  }

.grandchild {position: relative; width: 190px; height: 46px; margin: 0px; padding: 0px; border: 1px solid black; margin-bottom: 4px; }

.parent, .child, .grandchild {-moz-border-radius: 35px;