JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Start Form -->
<div class="wrapper-twocol">
<div class="twocol_row">
<div class="twocol_cell1">
<div class="form-header">Watch Video</div>
    <div class="form-arrow"><img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12"></div>
<img src="http://www.real.com/resources/wp-content/uploads/2013/06/stream-video1.jpg" width="386" height="279">
    </div>

<div class="twocol_cell2">
<div class="form-header">Watch Video</div>
    <div class="form-arrow"><img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12"></div>
<img src="http://www.real.com/resources/wp-content/uploads/2013/06/stream-video1.jpg" width="386" height="279">

</div>
</div>
</div>
<!-- End Form -->

CSS

/* 2 Column  */
.wrapper-twocol {
    position:relative;
    width:100%;
    border: none;
    margin: 20px 0 37px 0;
}

    .twocol_row {
    height:100%;
    white-space:nowrap;
    }

    .twocol_cell1, .twocol_cell2 {
        height:100%;
        width:47%;
        display:inline-block;
        white-space:normal;
        vertical-align: top;
        margin-left: 6%;
    }
        .twocol_cell1{
            margin-left: 0;
        }

.form-header {
    background:#939598;
    margin:0;
    padding: 10px 0 10px 0;
    color: #fff;
    font-family: 'SegoeRegular', Helvetica, Arial, sans-serif;
    font-size: 21px;
    text-align: center;
    
}

.form-arrow {
    margin: 0 auto;
    text-align: center;
    margin-top: -2px;
    padding-bottom: 10px;
}