JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="tc">
        <img width="50" height="50" src="http://www.iconpalace.com/icon_preview/User%20Graduate%20Girl-278-72.jpg" alt="" />
    </div>
    <div class="tc width-100"><textarea placeholder="Textarea"></textarea></div>
    <div class="mb tc width-50">
        <div class="info"></div>
    </div>
    <div class="mb tc width-50">
        <div class="b-buttons">
            <input class="b-buttons__input" />
            <button class="b-buttons__submit" type="submit">Search</button>
            <p class="b-buttons__note"></p>
        </div>
    </div>
</div>

CSS

.wrapper {
    padding: 15px;
    background: grey;
    overflow: hidden;
    min-width: 300px;
}
textarea {
    resize: vertical;
    overflow: auto;
    height: 49px;
    max-height: 200px;
    width: 100%;
    display: block;
}
img {
    margin-right: 15px;
    display: block;
    vertical-align: middle;
}
.mb { margin-top: 15px; float: left; }
.tc { display: table-cell; vertical-align: middle; }
.width-100 { width: 100%; }
.width-50 { width: 50%; }
.info {
    height: 100px;
    background: green;
}
.b-buttons {
    height: 90px;
    margin-left: 15px;
    background: yellow;
    padding: 5px 15px;
}
.b-buttons__input {
    width: 100%;
    height: 20px;
    float: left;
}
.b-buttons__submit {
    width: 90%;
    height: 20px;
    margin: 15px 5%;
    float: left;
}
.b-buttons__note {
    width: 100%;
    height: 15px;
    background: red;
    float: left;
}