JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.css">
<div class="ui grid">
    <div class="row">
        <div class="ten wide column">
            <div class="ui segment purple inverted">
                Text
                <img class="ui image" src="{{ asset('/img/pic1.jpg') }}">
            </div>
        </div>
        <div class="six wide column">
            <div class="ui segment purple inverted">
                Text
                <div class="row">
                    <img class="ui centered image" src="{{ asset('/img/pic2.jpg') }}">
                </div>
                <div class="row">
                    <img class="ui centered image" src="{{ asset('/img/pic3.jpg') }}">
                </div>
            </div>
        </div>
     </div>
</div>

CSS

.heightleft{
    height:300px;
}
.heightright{
    height:150px;
}