How to get this effect? - html

Question

I try to reach one point using div's and bootstrap. It should be in one line number of points and smaller information about points and in second area should be bootstrap icon and again information about icon.
My code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row center-block">
<div class="col-md-5" style="padding: 0px; padding-left: 10px; ">
<i class="pull-left h2"><h2>72</h2></i> TWOJE PUNKTY
</div>
<div class="col-md-7" style="padding: 0px">
<i class="fa fa-trophy fa-2x pull-left"></i> WYRÓZNIENIE SZYBKI BILL
</div>
<br>
<table class="table">
<tr>
<th><h2>72</h2></th>
<th>you points</th>
<th><i class="fa fa-trophy fa-2x pull-left"></i></th>
<th>fastL</th>
</tr>
</table>
</div>
</div>

Answer 1

Try below code and you can adjust col- class according to you
.flex-div {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
}
.icon-text {
float: left;
margin-right: 10px;
font-size: 34px;
}
.icon-text h2 {
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row center-block row-eq-height">
<div class="col-xs-6 flex-div">
<div class="icon-text">
<h2>72</h2>
</div>
<div class="info-text">
TWOJE PUNKTY<br/>
WYRÓZNIENIE SZYBKI BILL
</div>
</div>
<div class="col-xs-6 flex-div ">
<div class="icon-text">
<i class="glyphicon glyphicon-certificate"></i>
</div>
<div class="info-text">
Your Achivement Reached
</div>
</div>
</div>
</div>

Answer 2

You can achieve that effect using something like this.
HTML:
<div class="points"> 72 </div>
<div class="points-details">
Your
points
</div>
<div class="icon">+</div>
<div class="icon-details">
Your
Achievment
Reached
</div>
CSS:
.points{
display: inline-block;
}
.points-details{
display: inline-block;
}
.icon{
margin-left: 20px;
display: inline-block;
}
.icon-details{
display: inline-block;
}