1. float + clearfix
  2. display: inline-block; + letter-spacing: -1em;
  3. display: table-cell;
  4. display: flex;

float + clearfix

.clearfix::after {
	content: "";
	display: table;
	clear: both;
}
.holizontal1 {
	float: left;
}
/* IE8 以下は以下のハックが必要 */
.clearfix--for-under-ie8:before,
.clearfix--for-under-ie8:after {
	content: " ";
	display: table;
}

.clearfix--for-under-ie8:after {
	clear: both;
}

.clearfix--for-under-ie8 {
	*zoom: 1; /* for IE 6/7 only */
}
<div class="clearfix clearfix--for-under-ie8">
	<div class="holizontal1" style="background-color: #cff;">要素1</div>
	<div class="holizontal1" style="background-color: #fcf;">要素2<br>要素2</div>
	<div class="holizontal1" style="background-color: #ffc;">要素3<br>要素3<br>要素3</div>
</div>

要素1
要素2
要素2
要素3
要素3
要素3

display: inline-block; + letter-spacing: -1em;

.holizontal2__parent {
	letter-spacing: -1em;
}

.holizontal2__child {
	display: inline-block;
	letter-spacing: normal;
}
/* IE7 以下は以下のハックが必要 */
.holizontal2__child--for-under-ie7 {
	*display: inline;
	*zoom: 1;
}
<div class="holizontal2__parent">
	<div class="holizontal2__child" style="background-color: #cff;">要素1</div>
	<div class="holizontal2__child" style="background-color: #fcf;">要素2<br>要素2</div>
	<div class="holizontal2__child" style="background-color: #ffc;">要素3<br>要素3<br>要素3</div>
</div>

要素1
要素2
要素2
要素3
要素3
要素3


文字の位置は vertical-align で調整可能。

<div class="holizontal2__parent">
	<div class="holizontal2__child holizontal2__child--for-under-ie7" style="vertical-align: top; background-color: #cff;">要素1</div>
	<div class="holizontal2__child holizontal2__child--for-under-ie7" style="vertical-align: top; background-color: #fcf;">要素2<br>要素2</div>
	<div class="holizontal2__child holizontal2__child--for-under-ie7" style="vertical-align: top; background-color: #ffc;">要素3<br>要素3<br>要素3</div>
</div>
要素1
要素2
要素2
要素3
要素3
要素3

display: table-cell;

.holizontal3 {
	display: table-cell;
}
<div>
	<div class="holizontal3" style="background-color: #cff;">要素1</div>
	<div class="holizontal3" style="background-color: #fcf;">要素2<br>要素2</div>
	<div class="holizontal3" style="background-color: #ffc;">要素3<br>要素3<br>要素3</div>
</div>

要素1
要素2
要素2
要素3
要素3
要素3

display: flex;

.holizontal4 {
	display: flex;
}
<div class="holizontal4">
	<div style="background-color: #cff;">要素1</div>
	<div style="background-color: #fcf;">要素2<br>要素2</div>
	<div style="background-color: #ffc;">要素3<br>要素3<br>要素3</div>
</div>

要素1
要素2
要素2
要素3
要素3
要素3