JSFiddle - React, Tailwind, and code Playground

by Nick Karnik

HTML

<div class=parent>
    <div class=child1>
        
    </div>
    <div class=child2>
        <ul>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            
        </ul>
    </div>
</div>
<br><br>
<div class=parent>
    <div class=child2>
        <ul>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            
        </ul>
    </div>
    <div class=child1>
        
    </div>
</div>

CSS

.parent{
    border: 1px dashed red;    
    width:100px;    
    
}

.child1{
    background-color:gray;
    width:100px;
    height:50px;
    border: 1px solid blue;
}

.child2{
    background-color:yellow;
    width:100px;
    height:calc(100% - 50px);
    border: 1px solid blue;    
    
}