Split line boxes mix

by kmouse

HTML

<div class="wrapper">

<span><br/></span>

<span class="wrap">
	Before<span class="inner"> Inner </span>After
</span>

<hr/>

<span class="wrap">
	<span class="inner"><span class="inner">
		<span class="inner">
			<div>Y</div>
		</span>
		<span>Z</span>
	</span></span>
</span>

<hr/>

<span class="wrap">
	<span class="inner"><br/>Y</span>
	<span>Z</span>
</span>

</div>

CSS

.wrapper {
	overflow: auto;
	resize: both;
	background: #ccc;
	padding: 0;
	border: 12px solid #ccc;
	font-family: sans-serif;
	font-size: 14px;
}

span {
  color: red;
}

.wrap {
  border: 8px solid #ee0;
  background: #ada;
  line-height: 35px;
}

.inner {
  color: blue;
  border: 15px solid #f663;
  border-width: 5px 30px;
}

hr {
  clear: both;
  margin: 5px;
  display: block;
	border: 1px solid #bbb;
}