JSFiddle - React, Tailwind, and code Playground

by Alberto Naperi Jr.

HTML

<div class="container">
    <h3>Welcome</h3>
    <div class="port">
        <div id="vertical-title" class="col-left">
            <img src="http://www.placehold.it/60x650" class="img-responsive" alt="" />
        </div>
        
        <div class="col-right">
            <div class="row">
                <div class="col-half">
                    <img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
                </div>
                <div class="col-half">
                    <img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
                </div>
            </div>
    
            <div class="row">
                <div class="col-half">
                    <img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
                </div>
                <div class="col-half">
                    <img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
                </div>
            </div>
        </div>
    </div>
</div>

CSS

h3 {
    color: blue;
    margin: 5px;
}

.row {
    width: 100%;
}

.img-responsive {
    width: 100%;
}

.col-left {
    max-width: 60px;
    float: left;
}

.col-right {
    max-width: calc(100% - 60px);
    float: left;
}

.col-half {
    width: 49%;
    margin-left: 4px;
    float: left;
}

@media (max-width: 500px) {
    .col-half {
        width: 100%;
    }
}