Inline-block vertical alignment

by kmouse

HTML

<div class="wrapper">
	<div class="tr"><div>A</div><div class="span2">B</div><div></div></div>
</div>

<hr>

<div class="wrapper">
	<div class="float"><div>A</div> TEXT <div class="span2" style="float: right">B</div><div></div></div>
</div>

<hr>

<div class="wrapper">
<div>Left filler text. <div class="iblock">An inline-block. <p>A paragraph</p> Filler text.</div> Right filler text.</div>
</div>
<hr>
<div class="wrapper">
<div>Left filler text. <div class="iblock">An inline-block. <div class="mark right">Float right</div><div class="mark left">Float left</div> Filler text.</div> Right filler text.</div>
</div>
<hr>
<div class="wrapper">
<div>Left filler text. <div class="iblock">An inline-block. Filler text.<br><div class="mark right">Float right</div><div class="mark left">Float left</div></div> Right filler text.</div>
</div>

CSS

.wrapper {
  width: 800px;
  overflow: auto;
  resize: both;
	position: relative;
	background-color: #eee;
	border: 8px solid #ccc;
	text-align: center;
}
.tr {
	border: 1px solid #333;
}
.tr > div {
	display: inline-block;
	border: 2px solid #8e8;
	box-sizing: border-box;
	padding: 15px 5px;
	width: 25%;
	height: 47px;
	background: #3d3;
	vertical-align: baseline;
	
}
.tr > .span2 { width: 50%; }

.float {
	display: inline-block;
	border: 5px solid #caa;
}
.float > div {
	float: left;
	border: 2px solid #8e8;
	box-sizing: border-box;
	padding: 15px 5px;
	width: 50px;
	height: 47px;
	background: #3d3;
}
.iblock {
	display: inline-block;
	color: #33c;
}
.mark {
	color: #393;
}
.left {
	float: left;
}
.right {
	float: right;
}