JSFiddle - React, Tailwind, and code Playground

by Ivan Gerasimenko

HTML

<div class="border parent">
    <div class="text-box border">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div class="image-box border">Image</div>
</div>



<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
            <div id="col2"><img  src='http://www.tripleconcept.nl/nested_div_height.jpg'/></div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

CSS

.border {
    border: 1px solid #cccccc
}
.parent {
    float: left;
}
.text-box {
    width: 40%;
    float: left
}
.image-box {
    float: left;
    width: 59%;
    height: inherit;
}

#col2 > img {
    max-height: inherit;
}

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}