JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg" class="img1 clickImage">
<img src="http://media.tumblr.com/tumblr_mcf11pk4nj1ru82ue.jpg" class="img2 clickImage">
<div id="page-wrap">
    <div class="imageTitles">
        <div class="img1 imgTitle">TITLETEXT</div>
        <div class="img2 imgTitle">TITLETEXT</div>
    </div>
    <div class="imageInformations">
        <div class="img1 imgInformation">INFORMATION img1</div>
        <div class="img2 imgInformation">INFORMATION img2</div>
    </div>
</div>

CSS

#page-wrap {
    width:80%;
    height:100%;
}
.clickImage {
    width: 250px;
    height: auto;
    position: absolute;
}
.img1 {
    top: 0;
    left: 0;
}
.img2 {
    bottom: 0;
    right: 0;
}
.imageTitles {
    float:left;
    width: 50%;
}
.imgInformation {
    float:right;
    width: 50%;
}

JavaScript

jQuery('.imageTitles .imgTitle').hide(); 
 jQuery('.imageInformations .imgInformation').hide(); 

jQuery('.clickImage').on('click', function () {
    var imgNumber = jQuery(this).attr("class").replace('clickImage', '');
    jQuery('.imageTitles .imgTitle').hide(); //hide all image Titles
    jQuery('.imageTitles .imgTitle.' + imgNumber).show(); //show title for e.g. img1    
    jQuery('.imageInformations .imgInformation').hide();
    jQuery('.imageInformations .imgInformation.' + imgNumber).show(); 
});