JSFiddle - React, Tailwind, and code Playground
by HA3IK
HTML
<div id="wrap">
<div class="sepWrap1">
<div class="newsBlockR">
<h3>News Title</h3>
<img />
<p>While some of us are anxiously awaiting the holiday break so we can catch up on sleep (nope), see family (nah), and play through a disgusting amount of video games (bingo), the dedicated team at BioWare will also use that time to continue working on Dragon Age: Inquisition, playing through its latest build. Executive Producer of the Dragon Age franchise Mark Darrah explains on the company's blog that BioWare has always used the break to allow its teams to play through what they term the "Holiday Build." Basically, as complete of a build of the game as possible.</p>
</div>
<div class="newsBlockR">
<h3>News Title</h3>
<img />
<p>While some of us are anxiously awaiting the holiday break so we can catch up on sleep (nope), " Basically, as complete of a build of the game as possible.</p>
</div>
<div class="newsBlockR">
<h3>News Title</h3>
<img />
<p>While some of us are anxiously awaiting the holiday break so we can catch up on sleep (nope), see family (nah), and play through a disgusting amount of video games (bingo), the dedicated team at BioWare will also use that time to continue working on Dragon Age: Inquisition, playing through its latest build. Executive Producer of the Dragon Age franchise Mark Darrah explains on the company's blog that BioWare has always used the break to allow its teams to play through what they term the "Holiday Build." Basically, as complete of a build of the game as possible.</p>
</div>
</div>
<div class="sepWrap2">
<div class="newsBlockL">
<h3>News Title</h3>
<img />
<p>Executive Producer of the Dragon Age franchise Mark Darrah explains on the company's blog that BioWare has always used the break to allow its teams to play...
CSS
#wrap {
margin: 0 auto;
width: 1200px;
height: 100%;
border-left: 1px solid black;
border-right: 1px solid black;
background: #EAEAEA;
font-family: sans-serif;
}
.sepWrap1 {
float: left;
width: 600px;
}
.sepWrap2 {
float: right;
width: 600px;
}
.newsBlockR {
margin: 20px 10px 20px auto;
}
.newsBlockL {
margin: 20px 10px;
}
.newsBlockR, .newsBlockL {
width: 400px;
border: 1px solid black;
}
.newsBlockR h3, .newsBlockL h3 {
text-align: center;
}
.newsBlockR img, .newsBlockL img {
display: block;
margin: 10px auto;
width: 360px;
height: 200px;
border: 2px solid black;
}
.newsBlockR p, .newsBlockL p {
padding: 10px 5px;
text-align: justify;
}