JSFiddle - React, Tailwind, and code Playground

by Barry Peterson

HTML

<div class="table">
    <div class="table-row">
        <div class="table-cell">
            <p>Title</p>
        </div>
    </div>
    <div class="table-row large-container">
        <div class="table-cell">
            <div class="relative">
                <img src="http://placehold.it/350x900" class="responsive-image" />
            </div>
        </div>
    </div>
    <div class="table-row">
        <div class="table-cell">
            <p>Text that will be changing in height. Add and remove text to this.</p>
        </div>
    </div>
</div>

SCSS

.table {
    display: table;
    height: 600px;
    width: 30%;
    table-layout: fixed;
    
    .table-row {
        display: table-row;
        background-color: #CCFFCC;
        
        &.large-container {
            height: 100%;
            background-color: #FFCCFF;
            
            .table-cell {
                position: relative;
            }
        }
        
        .relative {
            position: relative;
            height: 100%;
            width: 100%;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
        
        .table-cell {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        
        .responsive-image {
            max-height: 90%;
            max-width: 90%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    }
}