JSFiddle - React, Tailwind, and code Playground

by mattopen

HTML

<style>
    body * {
        box-sizing: border-box;
        color:white;
    }

    .test {
        margin: 0 auto;
        position: relative;
        height: 65vh;
        width: 80vw;
        display: flex;
        text-align: center;
    }
    .testA {
        background-color: black;
        width: 61.5%;
        display: inline-block;
        padding-right: 18px;
        line-height: 65vh;

    }

    .testB {
        background-color: green;
        flex-grow:1;
        line-height: 32vh;
        position: relative;
    }

    .testC {
        background-color: royalblue;
        vertical-align: top;
        margin-bottom: 10px;
    }

    .testD {
        flex-grow:1;
        background-color: purple;
        vertical-align: bottom;
        margin-top: 10px;
    }

    .test img {
        vertical-align: middle;
    }

    .testA img {
        height: 100%;
    }

    .testC img {
        vertical-align: top;
        height: 32vh;
    }

    .testD img {
        vertical-align: bottom;
        height: 32vh;
    }

</style>

<div class="test">
    <div class="testA">
        a
    </div>
    <div class="testB">
        <div class="testC">
            c
        </div>
        <div class="testD">
            d
        </div>
    </div>
</div>
<hr>
<div class="test">
    <div class="testA">
        <img src="https://placehold.it/300x500">
    </div>
    <div class="testB">
        <div class="testC">
            <img src="https://placehold.it/300x500">
        </div>
        <div class="testD">
            <img src="https://placehold.it/300x500">
        </div>
    </div>
</div>
<hr>
<div class="test">
    <div class="testA">
        <img src="https://placehold.it/500x300">
    </div>
    <div class="testB">
        <div class="testC">
            <img src="https://placehold.it/500x300">
        </div>
        <div class="testD">
            <img src="https://placehold.it/500x300">
        </div>
    </div>
</div>