JSFiddle - React, Tailwind, and code Playground

by CoolBlue

HTML

<body>
    <div class="row">Header</div>
    <table id="wrapper">
        <tr id="cont-top">
            <td>
                <img src="http://img2.wikia.nocookie.net/__cb20081223173835/uncyclopedia/images/7/7e/Mountain.jpg" />
            </td>
            <td>
                <img src="https://c1.staticflickr.com/5/4081/4811391918_7d607682b6_z.jpg" />
                <p>The margins of this text pushes the image down so it aligns with the corner of the other image.</p>
            </td>
        </tr>

        <tr id="cont-bottom">
            <td>
                <h1>Random.</h1>
                <p> Both texts must be centered next to their adjacent images as well. </p>
            </td>
            <td>
                <img src="https://c1.staticflickr.com/5/4081/4811391918_7d607682b6_z.jpg" />
            </td>
        </tr>
    </table>

</body>

CSS

#wrapper {
	MARGIN-LEFT: auto;
	MARGIN-RIGHT: auto;
	height: 100%;
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	z-index: 0;
	-moz-animation-duration: 4s;
	-o-animation-duration: 4s;
	-webkit-animation-duration: 4s;
	animation-duration: 4s;
	-moz-animation-name: sizing;
	-o-animation-name: sizing;
	-webkit-animation-name: sizing;
	animation-name: sizing;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-o-animation-direction: alternate;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
}
@-moz-keyframes sizing{
	from{
		height: 100%;
		width: 100%;
	}
	to{
		height: 35%;
		width: 35%;
	}
}

@-webkit-keyframes sizing{
	from{
		height: 100%;
		width: 100%;
	}
	to{
		height: 35%;
		width: 35%;
	}
}

@keyframes sizing{
	from{
		height: 100%;
		width: 100%;
	}
	to{
		height: 35%;
		width: 35%;
	}
}
td, tr{
	padding: 0;
	position: relative;
}
td{
	/*outline: 1px dotted red;*/
}
.row {
    width: 100%;
		padding: 0.5em;
		height: 4%;
}
/*top row********/
#cont-top {
	height: auto;
	margin: 0;
	padding: 0;
}
	/*image*/
	#cont-top td:first-child {
		width: 60%;
	}
	#cont-top img{
		width: 100%;
		vertical-align: bottom;
		z-index: 20;
	}
	/*text*/
	#cont-top td:last-child{
		padding: 0;
	}
	#cont-top td:last-child p {
		margin: 0 10px;
		vertical-align: central;
	}
	/*formatting hack*/
	#cont-top td:last-child img{
		width: 100%;
		height: 1px;
		line-height: 1px;
		float: left;
		opacity: 0;
	}
/*bottom row********/
#cont-bottom {
	height: auto;
	position: relative;
}
	/*image*/
	#cont-bottom td:last-child {
		vertical-align: top;
	}

	#cont-bottom img{
		vertical-align: top;
		width: 100%;
		left: 0;
		z-index: 20;
	}
	/*text*/
	#cont-bottom td:first-child {
		vertical-align: central;
		padding: 0 10px;
	}