Layout issues with spans and Bootstrap 3 - css

Question

TB3 here. Here is the respective jsFiddle. I am trying to build a little minitron (mini jumbotron) that has the following layout:
As you can see, there is a main <div> given the minitron class. Each 'minitron' has:
An icon (Glyphicon)
A name
A description
A 'Learn More' button
Unfortunately my CSS-fu is pretty weak, and as you can see in that fiddle, I'm just not achieving the desired layout.
Here's my attempt at some CSS rules:
.minitron-icon {
width:20%;
height: 20%;
margin: 5px;
}
.minitron-name {
font-size: 18px;
}
.minitron-desc {
width: 80%;
margin: 5px;
}
.minitron-learnmore {
width: 95%;
}
Can anyone spot where I'm going awry?

Answer 1

What about this one? https://jsfiddle.net/oh69hq71/17/
Taking advantage of BS grid system using rows and columns. The first row containing the glyphicon and name/description, the other one with the learn more full width.
<div class="well minitron">
<div class="row">
<div class="col-xs-2">
<span class="glyphicon glyphicon-piggy-bank minitron-icon"></span>
</div>
<div class="col-xs-10">
<div class="row">
<span class="minitron-name">Some Name</span>
</div>
<div class="row">
<span class="minitron-desc">A short meaningful description goes here.</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="minitron-learnmore btn btn-success" type="button">LEARN MORE ABOUT JUPITER!</button>
</div>
</div>
</div>
*Update:
Increasing glyphicon size: In the glyphicon span set its style as "font-size:1.5em;"
To align it closer to name and description, add the style="text-align:right" at the glyphicon div container
The description is aligned to the named without the original css styles.
To increase padding (or margin) between the learn more button and description/icon, increase the learn more div top margin
New fiddle: https://jsfiddle.net/oh69hq71/18/