JSFiddle - React, Tailwind, and code Playground

by Roman

HTML

<div class="l-wrapper">
            <ins class="l-child l-child_left"><div>surprise!</div><a href="#">left</a></ins>
            <ins class="l-child l-child_right"><a href="#">right</a></ins>
            <ins class="l-child l-child_helper"></ins>
</div>

CSS

* {
        margin:0;
        padding:0;
    }

    body {
        font:.8em Helvetica, Arial, sans-serif;
        background:#fff;
        color:#000;
    }

    .l-wrapper {
        width:500px;
        background:#555;
        height:500px;
        text-align:justify;
    }

    .l-child {
        display:inline-block;
        vertical-align:bottom;
    }

    .l-child a {
        display:block;
        width:100%;
        height:100%;
    }

    .l-child_left {
        width:200px;
        height:100px;
        background:#0c0;
    }

    .l-child_right {
        width:100px;
        height:200px;
        background:#ffc0cb;
    }

    .l-child_helper {
        width:100%;
    }