Why float: right/ pull-right dont work in the below code?

Question

<div class="col-xs-12" style="padding:0px">
  <div class="col-xs-6 pull-left">
    <div class="col-xs-12"><strong>Cooking Details</strong></div>
    
    <div class="col-xs-12">
      <span class="col-xs-6 pull-left">Ingredient</span>
      <span class="pull-right col-xs-6 " style="padding-right:0px">Quantity</span>
    </div>
  <div>
<div>

Pull-right works fine for cooking details line, but for ingredient and quantity I am unable to format it with pull-right/float: right.

I am expecting quantity to be at the end of the div it is in. It is getting the 50% width but float:right is not working

Answer 1

Bootstrap 3: https://www.codeply.com/p/OSJMu17P9a

<div class="col-xs-12" style="padding:0px">
    <div class="col-xs-12"><strong>Cooking Details</strong></div>
    <div class="col-xs-6">
        <span class="pull-left">Ingredient</span>
        <span class="pull-right" style="padding-right:0px">Quantity</span>
    </div>
</div>

Bootstrap 4: https://www.codeply.com/p/BrGeGl9mZi#

<div class="col-12" style="padding:0px">
    <div class="col-12"><strong>Cooking Details</strong></div>
    <div class="col-6">
        <span class="float-left">Ingredient</span>
        <span class="float-right" style="padding-right:0px">Quantity</span>
    </div>
</div>