JSFiddle - React, Tailwind, and code Playground

by silb3r

HTML

<article class="container-outer">
    <section class="user-info">USER<br>INFO</section>
    <div class="container-inner">
        <section class="post-description">POST DESCRIPTION</section>
        <section class="post-content">POST CONTENT<br>line<br>line<br>line<br>line<br>line<br>line</section>
    </div><!-- end .container-inner -->    
</article><!-- end .container-outer -->

CSS

.container-outer {
    display: flex;
    align-items: stretch; /* tells boxes to stretch vertically (default value)  */
    width: 75%; 
    min-height: 250px;
    border: 5px solid mistyrose;   
}

.user-info {
    display: flex; /* nested flexbox, to enable flex properties */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
    border: 3px solid red;
    font-family: verdana;
    font-weight: bold;
    font-size: 2em;
    color: red;
    box-sizing: border-box;
    overflow: auto;
}

.container-inner {
    display: flex; /* nested flexbox */
    flex-direction: column;
    width: 100%;
    border: 3px dashed black;
    overflow: auto;
    }

.post-description {
    display: flex; /* nested flexbox */
    justify-content: center;
    align-items: center;
    height: 50px; /* fixed height */
    border: 3px solid green;
    font-family: verdana;
    font-weight: bold;
    font-size: 1.5em;
    color: green;
    box-sizing: border-box;
    overflow: auto;
}

.post-content {
    display: flex; /* nested flexbox */
    justify-content: center;
    align-items: center;
    flex-grow: 1; /* box takes all available space (stretch, basically) */
    border: 3px solid blue;
    font-family: verdana;
    font-weight: bold;
    font-size: 2em;
    color: blue;
    box-sizing: border-box;
    overflow: auto;
}

JavaScript

/*THIS IS THE ONE!!!*/