JSFiddle - React, Tailwind, and code Playground

by Raghu Raman

HTML

<div class= "parent">
    <div class= "left">
        <div class= "image"> IMAGE
        </div>
        <div class= "works"> WORKS
        </div>
        <div class= "share"> SHARE
        </div>
    </div>
    <div class= "right">
        <div class= "left-two"> DETAILS
        </div>
        <div class= "right-two"> MOBILE APP
        </div> 
        <div class= "summary"> SUMMARY
        </div>
    </div>
</div>

CSS

.parent{
    position: relative;
}
.left{
    display: inline_block;
    float:left;
    background-color: red;
    height: 300px;
    width: 30%;
    position: static;
}

.right{
    display: block;
    background-color: yellow;
    height: 300px;
    width: auto;
}
.image{
    margin: 0 auto;
    width: 75%;
    height: 60%;
    background-color: #949232;
}
.works{
    margin: 0 auto;
    width: 75%;
    height: 17%;
    background-color: white;
}
.share{
    margin: 0 auto;
    width: 75%;
    height: 23%;
    background-color: #0022fe;
}
.left-two{
    display: inline_block;
    float:left;
    background-color: #fe0da7;
    height: 60%;
    width: 50%;
    position: static;
}
.right-two{
    display: block;
    background-color: #03efd4;
    height: 60%;
    width: auto; 
}