CSS - change height to up by content - css

Question

i have 3 boxes and i need change height by content but height must change to up (Lower margin aligned). Here is image how it should look:
<style>
.wrapper{
width: 100%;
height: 30px;
}
.wrapper .point{
width: 12px;
height: 12px;
background: #979797;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
float: left;
margin-top: 3px;
}
.wrapper .text{
width: 130px;
float: left;
border-bottom: 2px solid #979797;
color: #979797;
font-size: 11px;
min-height: 20px;
text-align: center;
padding-bottom: 20px;
margin-top: -12px;
}
</style>
<div class="wrapper">
<div class="point"></div>
<div class="text">Short</div>
<div class="point"></div>
<div class="text">Short</div>
<div class="point"></div>
<div class="text">Very long text. Lorem ipsum dolor sit amet</div>
<div class="point"></div>
</div>
How to do it? Thanks

Answer 1

try
height:auto,
width:100%
in your css

Answer 2

It's impossible with float:left (unless you know the exact height in advance and can set the margin-top according to it). But floats never were meant to do this type of layout anyways.
However, it can be easyly done with Flexbox:
.wrapper{
display: flex;
flex-flow: row wrap;
align-items: flex-end;
}
.wrapper .point{
width: 12px;
height: 12px;
background: #979797;
border-radius: 70px;
display: inline-block;
margin-top: 3px;
}
.wrapper .text{
width: 90px;
border-bottom: 2px solid #979797;
color: #979797;
font-size: 11px;
text-align: center;
padding: 20px;
background: #eee;
}
<div class="wrapper">
<div class="point"></div>
<div class="text">Short</div>
<div class="point"></div>
<div class="text">Short</div>
<div class="point"></div>
<div class="text">Very long text. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</div>
<div class="point"></div>
</div>
Also, this can be done with inline-blocks, by setting vertical-align:bottom to their container. You can add this as a fallback to Flexbox solution (all you need for this is setting vertical-align:bottom to .wrapper and display:inline-block to points and texts). I'd not recommend to rely on inline-blocks only because they weren't meant to do the layout, like floats, and will need some sort of hacks to adjust the spaces between items, because they treat whitespace characters between tags as whitespace text characters. But as a fallback for non-Flexbox-supporting browsers (like IE10-) they would provide a decent experience (much better than nothing).