JSFiddle - React, Tailwind, and code Playground

by andy_lamb

HTML

<div id="equal_cols">
    <div class="largeleft">
        <img style="padding: 5px; margin: 10px; float: right; border: 1px solid #ccc;" src="images/some_img.jpg" width="205" height="126" alt="image" />
        <h2>Heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis auctor metus, sit amet sollicitudin elit imperdiet sit amet.</p>
        <div class="alignlink"><a class="greybg" href="#">Read more</a></div>
    </div>
    <div class="col10px"></div>
    <div class="smallright">
        <h2>Heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis auctor metus, sit amet sollicitudin elit imperdiet sit amet. Nunc laoreet leo nec sem porta scelerisque. In vestibulum fermentum metus, mattis placerat orci ornare quis. Maecenas vitae accumsan tellus.</p>
        <div class="alignlink"><a class="greybg" href="#">Read more</a></div>
    </div>
</div>

CSS

a.greybg {
	padding: 3px;
	background: #464646;
	color: #ffffff;
}
p {
	padding: 10px 20px;
	margin: 0;
	font-size: 0.875em;
}
div.alignlink {
	position: absolute;
	bottom: 10px;
	right: 10px;
	margin: 0;
	padding: 0;
}
.equal_cols {
	display: table;
	width: 798px;
}
.largeleft {
	display: table-cell;
	width: 500px;
	border: 1px solid #ccc;
	position: relative;
	padding: 0 0 30px 0; /*ensures enough room for absoutely positioned .greybg link*/
}
.col10px {
	display: table-cell;
	position: relative;
	width: 10px;
}
.smallright {
	display: table-cell;
	width: 288px;
	border: 1px solid #ccc;
	position: relative;
	padding: 0 0 30px 0; /*ensures enough room for absoutely positioned .greybg link*/
}