is there a chrome css render bug?

Question

 .wrapper {
   width: 200px;
}

.wrapper > div {
     float: left;
     width: 50%;
     font-size: 20px;
     line-height: 30px;
}
 .wrapper > div span {
     font-size: 12px;
}

<div class="wrapper">
  <div>a<span>i</span></div>
  <div>b</div>
  <div>c</div>
</div>

maybe there is a mistake in me ,

but who can tell me why ?

or how can i analysis the " what indeed happen there " ?

thanks