JSFiddle - React, Tailwind, and code Playground
HTML
<div class="content">
<div class="td">
<div class="rowOne">
<img src="http://static.sportskeeda.com/wp-content/uploads/2013/12/img_logo_blue-2048499.jpg" alt="" />
</div>
<div class="rowTwo">
<div class="img" ><img src="http://static.sportskeeda.com/wp-content/uploads/2013/12/img_logo_blue-2048499.jpg" alt="" data-desc="Описание IMG Описание IMG Описание IMG Описание IMG Описание IMG" /></div>
<div class="img" ><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQsf9XuWuvvusLpCzHFg2oX83g_4Hxgbi1BFiRGaVokvYDW1NpV" alt="" data-desc="Описание Горы Описание Горы Описание ГорыОписание Горы Описание Горы Описание Горы" /></div>
<div class="img" ><img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" alt="" data-desc="Описание дерево Описание дерево Описание дерево Описание дерево Описание дерево Описание деревоОписание дерево мОписание деревоОписание деревоОписание дерево" /></div>
</div>
</div>
<div class="td right">Описание IMG Описание IMG Описание IMG Описание IMG Описание IMG</div>
</div>
CSS
html, body {
position: relative;
height: 100%;
}
div.content {
height: 100%;
}
div.td {
display: block;
float: left;
width: 49%;
height: 100%;
min-height: 400px;
}
div.td:first-child {
border-right: 1px solid black;
}
div.td:last-child {
padding: 5px;
}
div.rowOne {
height: 80%;
border-bottom: 1px solid black;
padding: 5px;
}
div.rowTwo {
height: 20%;
min-height: 100px;
}
div.rowOne img {
width: 100%;
height: 100%;
}
div.rowTwo img {
width: 100px;
height: 100px;
border-radius: 100px;
border: solid 1px;
}
div.rowTwo img:hover {
cursor: pointer;
opacity:0.4;
}
div.img {
width: 100px;
display: block;
float: left;
margin: 5px;
}
JavaScript
$('div.rowTwo img').click(function (){
$('.rowOne').html("<img src='" + $(this).attr('src') + "' alt='' />");
$('.right').html($(this).attr('data-desc'));
});