JSFiddle - React, Tailwind, and code Playground

by horprogs

HTML

<main class="clearfix">
    <div class="block1"> <a href="#">  <img src="img/block1.png" height="323" width="304" alt=""></a>

    </div>
    <div class="content clearfix">
        <p class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident illo, fugit consectetur facilis ab, nulla similique. Mollitia facere cupiditate assumenda, iure, hic nesciunt non provident tempore similique, accusamus quod magni</p>
    </div>
    <div class="block2 clearfix"> <a href="#">  <img src="img/block2.png" height="323" width="304" alt=""></a>

    </div>
</main>

CSS

main {
	max-width: 1200px;
	margin: 100px auto 0;
	position: relative;
}
 .block2 {

     width: 305px;

     position: relative;

     display: inline-block;

     text-align: right;

     float: right;

 }

 .block1 {

     display: inline-block;

     width: 304px;

     position: relative;

     left: 0;

 }

.content {

     width:400px;

     display: inline-block;

     text-align: center;

     vertical-align: top;

     left: 0;

     right: 0;

     margin: 0 auto;

     font-size: 16px;

     position: absolute;

 }

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */
}

@media screen and (max-width:1024px){
 .block1 {
display: none;
}
.block2 {
    display: block;
    margin: 400px auto 0;
    left: 0;
    position: relative;
    float:none;
}
    
}