JSFiddle - React, Tailwind, and code Playground

by FiNGAHOLiC

HTML

<div class="mod-item">
    <div class="mod-item-col">
        <img class="mod-img" src="http://placehold.it/100x100">
    </div>
    <div class="mod-item-col">
        <div class="mod-box type-top">
            <p>mogemoge<br>mogemoge<br>mogemoge<br>mogemoge</p>
        </div>
        <div class="mod-box type-bottom">
            <p>mogemoge</p>
        </div>
    </div>
</div>

CSS

.mod-item {
    background: blue;
    display: flex;
    display: -webkit-flex;
    min-height: 500px;
}

.mod-item-col {
    display: flex;
    display: -webkit-flex;
    flex:1;
    -webkit-flex:1;
    flex-direction: column;
    -webkit-flex-direction: column;
}

.mod-img {
    height: auto;
    width: 100%;
}

.mod-box {
    align-items: center;
    -webkit-align-items: center;
    display: flex;
    display: -webkit-flex;
    flex: 1;
    -webkit-flex: 1;
    font-size: 16px;
    line-height: 22px;
}

.mod-box.type-top {
    background: red;
}

.mod-box.type-bottom {
    background: pink;
}

@media only screen and (max-width: 399px) {
    .mod-item {
        min-width: 300px;
    }
    .mod-box {
        font-size: 10px;
        line-height: 16px;
    }
}