JSFiddle - React, Tailwind, and code Playground

by Edbert

HTML

<div class="wrapper">
    <div class="wrapper__first">
        <div class="wrapper__first__inner">
        </div>
    </div>
    <div class="wrapper__second">
        <div class="wrapper__thumb">
            <div class="wrapper__second__thumb__inner"></div>
        </div>
    </div>
</div>

SCSS

.wrapper {
    display : flex;
    align-items : center;
    flex-flow : row nowrap;
    justify-content : space-between;
    background-color : lightblue;
    width : 100%;
    height: 200px;
}

.wrapper__first {
    flex : 1;
    background : lightyellow;
    align-self : stretch;
}

.wrapper__second {
    flex : 1;
    padding : 15px;
    background : lightcoral;
    align-self : stretch;    
    .wrapper__thumb {
        height: 100%;
    }
    .wrapper__second__thumb__inner {
        background : thistle;
        height : 100%;
    }
    
}