JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<div class="myContainer">
<div class="box"><p>Left menu</p><p>Left menu</p><p>Left menu</p><p>Left menu</p><p>Left menu</p><p>Left menu</p><p>Left menu</p></div>
<div class="box"><p>My heading - fine as is, a fixed size based upon content</p></div>
<div class="box"><p>I will grow with content in some situations! If I get really big (greater height), then the box below (called important bit) should fit snuggly under Left menu</p><p><!--I am more content which is not predicatble... Ha ha ha ha ha, I have destroyed this wonderfully layout design. Next step, the world! --></p></div>
<div class="box"><p>The important bit. I want to appear under left menu, but I don't. There is a big old margin between me and the Left menu </p></div>
</div>

CSS

.myContainer
{ 
    width:420px;
    float:left;
}

.box{
    float:left;
    border:solid;
    width:200px;
}