CSS3 inline-Block doesn't work on fluid floating divs

CSS3 inline-Block doesn't work on fluid floating divs

I try to get all fluid elements after a line break in a row with
vertical-align: top and display inline-block. But it doesn't work. The
different height of the elements shoot the the layout after a line break.
Here is a sample Fiddle
stylesheet:
section {
display: block;
max-width: 720px;
}
img {
display: block;
width: 100%;
height: auto;
}
.container {
width: 100%;
}
.container:after {
content: "";
display: table;
clear: both;
}
.col {
float: left !important;
margin-right: 3.3333333333333335%;
}
.t4 {
width: 31.11111111111111%;
}
.t4:nth-child(3n) {
margin-right: 0;
}
.p-item {
display: inline-block;
vertical-align: top;
}
html5
<section class="content">
<div class="container inside">
<div class="col t4 p-item">
<img src="http://placehold.it/225x300/01da90/fffedb" />
<p>Brandname<br />This is a so such very very very long
Productname i can't believe! This is a so such very very
very long Productname i can't believe!<br />99.00 EUR</p>
</div>
<div class="col t4 p-item">
<img src="http://placehold.it/225x300/01da90/fffedb" />
<p>Brandname<br />This is a so such very very very long
Productname i can't believe!<br />99.00 EUR</p>
</div>
<div class="col t4 p-item">
<img src="http://placehold.it/225x300/01da90/fffedb" />
<p>Brandname<br />This is a so such Productname i can't
believe!<br />99.00 EUR</p>
</div>
<div class="col t4 p-item">
<img src="http://placehold.it/225x300/01da90/fffedb" />
<p>Brandname<br />This is a so such very very very long
Productname i can't believe! This is a so such very very
very long Productname i can't believe!<br />99.00 EUR</p>
</div>
<div class="col t4 p-item">
<img src="http://placehold.it/225x300/01da90/fffedb" />
<p>Brandname<br />This is a so such very very very long
Productname i can't believe! This is a so such very very
very long Productname i can't believe!<br />99.00 EUR</p>
</div>
<div class="col t4 p-item">
<img src="http://placehold.it/225x300/01da90/fffedb" />
<p>Brandname<br />This is a so such very very very long
Productname i can't believe!<br />99.00 EUR</p>
</div>
<div class="col t4 p-item">
<img src="http://placehold.it/225x300/01da90/fffedb" />
<p>Brandname<br />This is a so such Productname i can't
believe!<br />99.00 EUR</p>
</div>
<div class="col t4 p-item">
<img src="http://placehold.it/225x300/01da90/fffedb" />
<p>Brandname<br />This is a so such very very very long
Productname i can't believe! This is a so such very very
very long Productname i can't believe!<br />99.00 EUR</p>
</div>
<div class="col t4 p-item">
<img src="http://placehold.it/225x300/01da90/fffedb" />
<p>Brandname<br />This is a so such very very very long
Productname i can't believe! This is a so such very very
very long Productname i can't believe!<br />99.00 EUR</p>
</div>
<div class="col t4 p-item">
<img src="http://placehold.it/225x300/01da90/fffedb" />
<p>Brandname<br />This is a so such very very very long
Productname i can't believe!<br />99.00 EUR</p>
</div>
<div class="col t4 p-item">
<img src="http://placehold.it/225x300/01da90/fffedb" />
<p>Brandname<br />This is a so such Productname i can't
believe!<br />99.00 EUR</p>
</div>
</div>
</section>