JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div class="bounds">
    
    
    <div class="container">
        <div class="block">
            <div class="content a">dfdsfds<br />dfdsfdsfsd</div>
        </div>
        <div class="content b">
            dfdsfds
        </div>
    </div>
    
    ssss
    <div class="container">
        <div>
            <div class="content a">dfdsfds<br />dfdsfdsfsd</div>
        </div>
        <div class="content b">
            dfdsfds
        </div>
    </div>
    
    dddd
    <div class="container">
        <div>
            <div class="content a">dfdsfds<br />dfdsfdsfsd</div>
        </div>
        <div class="content b">
            dfdsfds
        </div>
    </div>
        
        
</div>

CSS

.container {
    display:table;
    clear:both;
    border-spacing: 10px;
    border-collapse: separate;
    width:100%;
    min-width:100%;
    border:0px solid #666;
}
.container > div {
    display:table-cell;
    width:100%;
    border:1px dotted #666;
    min-height:100%;
    height:100%;
    position:relative;
    vertical-align:top;
}
.bounds {
    height:300px;
    margin:auto;
    width:100%;
    min-width:300px;
    max-width:600px;
    border:1px dotted red;
}
.container > div > .content {
}
.container > div .a {
    border:2px solid red;
}
.container > div.b {
    padding:10px;
    border:2px solid blue;
}