JSFiddle - React, Tailwind, and code Playground

by salman

HTML

<div id="container">
	<div id="tempwrap">
		<div id="message">Lorem 1. Ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum gravida tincidunt.</div>
		<a id="link" href="#">OK</a>
	</div>
	<div id="info">Lorem 2. Ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum gravida tincidunt.</div>
</div>

CSS

#container {
	color: #FFFFFF;
	background-color: #FF0000;
	position: fixed;
	left: 5%;
	right: 5%;
	bottom: 10px;
}
#tempwrap {
	line-height: 3; /* sets the _outer_ line height of #message as well as height of #link */
	position: relative; /* for positioning #link */
}
#message {
	background: rgba(255, 255, 255, .5);
	line-height: normal; /* the _inner_ line height */
	max-width: 80%; /* room for #link */
	display: inline-block;
	vertical-align: middle;
}
#link {
	color: #000000;
	background-color: #FFFFFF;
	padding-left: 1em;
	padding-right: 1em;
	position: absolute;
	right: 0;
	top: 50%; /* top aligns with middle of parent */
	margin-top: -1.5em; /* the height is 3em so push 3/2em upwards */
}
#info {
	background-color: #008000;
}