JSFiddle - React, Tailwind, and code Playground
HTML
<div id="sessionManageWrapper">
<div class="sessionBox activeSession">
<div class="activeCircle sessionActiveGreen" title="Online, active"></div>
<img src="http://i.imgur.com/k0h3WPJ.png">
<div class="sessionSeparator"> </div>
<p>@currentSessLocation</p>
<p>@currentSessDevice</p>
<p>@currentSessIP</p>
<div class="logoutSessWrapper"><a href="" class="redButton">Sign Out</a></div>
</div>
</div>
CSS
#sessionManageWrapper {
max-width: 45%;
}
#sessionManageWrapper .sessionBox:not(:last-child) {
margin-bottom: 5px;
}
.sessionBox {
background-color: #444343;
padding: 4px;
border-radius: 3px;
border: 2px solid grey;
vertical-align: middle;
position: relative; /* NEW; set nearest positioned ancestor for abspos child */
}
.sessionBox img {
vertical-align: middle;
height: 32px;
width: 32px;
}
.logoutSessWrapper {
/* float: right; */
line-height: 15px;
position: absolute; /* NEW */
right: 5px; /* NEW */
top: 50%; /* NEW */
transform: translateY(-50%); /* NEW */
}
.sessionBox p {
margin: 0;
vertical-align: middle;
display: inline-block;
}
.sessionBox p:not(:last-child) {
margin-right: 10px;
}
.sessionSeparator {
background-color: grey;
width: 1px;
height: 24px;
display: inline-block;
vertical-align: middle;
}
.activeCircle {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: 1px solid #ccc;
width: 8px;
height: 8px;
display: inline-block;
vertical-align: middle;
}
.sessionActiveGreen {
background-color: green;
}
.redButton {
-moz-box-shadow: inset 0px 1px 0px 0px #cf866c;
-webkit-box-shadow: inset 0px 1px 0px 0px #cf866c;
box-shadow: inset 0px 1px 0px 0px #cf866c;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315));
background: -moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background: -webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background: -o-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background: -ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background: linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#d0451b', endColorstr='#bc3315', GradientType=0);
background-color: #d0451b;
-moz-border-radius: 3px;
-webkit-border-radius:...