Mulitiple span in single button - Span Positioning - html

Question

I am trying to span positioning in button but cannot figur it out how to do it. Please help me out. Defferent button acting defferently.
I am using Bootstrap.
My expectation: enter image description here
But Showing:enter image description here
My Code
.button-row {
height: 200px;
width: 180px;
}
.button-radius {
border-bottom-right-radius: 2em;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
white-space:normal;
word-wrap: break-word;
}
.label-top-left{
position: relative;
left: -60px;
top: -90px;
display: inline-block;
padding:20px;
}
.label-top-right{
position: relative;
left: 60px;
top: 90px;
display: inline-block;
padding:20px;
}
.label-bottom-right{
position: relative;
right: -70px;
top: 36px;
display: inline-block;
}
.label-bottom-left{
position: relative;
left: -60px;
top: 90px;
display: inline-block;
}
.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}
<h3 class="text-warning">My Purchasing</h3>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 button-container">
<button type="button" onclick="location.href = 'Purchasing/PurchaseRequisitionRelease.aspx';" class="btn btn-default button-row button-radius">
Approve Purchase Requisition
<span runat="server" id="spnPR" class="label label-warning label-top-right">1 Pending</span>
<span class="glyphicon glyphicon-list-alt gi-2x text-warning label-top-left"></span>
</button>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 button-container">
<button type="button" onclick="location.href = 'Purchasing/PurchaseOrderRelease.aspx';" class="btn btn-default button-row button-radius">
Approve Purchase Order
<span runat="server" id="SpnNoti" class="label label-warning label-bottom-left">2 Notification</span>
<span runat="server" id="spnPO" class="label label-warning label-top-right">5 Pending</span>
<span class="glyphicon glyphicon-send gi-2x text-warning label-top-left"></span>
</button>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 button-container">
<button type="button" class="btn btn-default button-row button-radius" onclick="location.href = 'Purchasing/PurchaseHistory.aspx';">
Purchase History
<span class="glyphicon glyphicon-time gi-2x text-warning label-top-left"></span>
</button>
</div>
</div>

Answer 1

Try this will work...
.button-row {
height: 200px;
width: 180px;
}
.sec1,.sec2,.sec3{
height: 70px;
margin: 0 !important;
margin-top: 8px !important;
}
.button-radius {
border-bottom-right-radius: 2em;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
white-space:normal;
word-wrap: break-word;
}
.label-top-left{
position: relative;
left: -60px;
top: -90px;
display: inline-block;
padding:20px;
}
.label-top-right{
position: relative;
left: 60px;
top: 90px;
display: inline-block;
padding:20px;
}
.label-bottom-right{
position: relative;
right: -70px;
top: 36px;
display: inline-block;
}
.label-bottom-left{
position: relative;
left: -60px;
top: 90px;
display: inline-block;
}
.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<h3 class="text-warning">My Purchasing</h3>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 button-container">
<a onclick="location.href = 'Purchasing/PurchaseOrderRelease.aspx';" class="btn btn-default button-row button-radius">
<div class="row sec1" >
<span class="glyphicon glyphicon-send gi-2x text-warning pull-left"></span>
<span runat="server" id="spnPO" class="label label-warning pull-right">5 Pending</span>
</div>
<div class="sec2">
Approve Purchase Order
</div>
<div class="row sec3">
<span runat="server" id="SpnNoti" class="label label-warning pull-left">2 Notification</span>
</div>
</a>
</div>
</div>