html - How to add spacing between the words in a <p> tag and align them with text boxes in the next div -

the following code form wrote:

<div class="container-fluid" id="unlabelled">             <p class="bg-primary">items<span>quantity</span><span>in kit</span></p>             <form>                 <div class="form-group col-lg-5">                     <input type="text" class="form-control" id="unlabelled-items" placeholder="enter code or description">                 </div>                 <div class="form-group col-md-2">                     <input type="text" class="form-control" id="quantity" placeholder="enter quantity">                 </div>                 <div class="form-group">                     <input type="checkbox"  id="in-kit">                     <button class="btn-primary" id="add-btn">add</button>                 </div>             </form>             </div> 

i using bootstrap here. , have top paragraph heading class="bg-primary" gives nice background heading. have 2 text input fields, checkbox , button. want align text in above paragraph these fields.

https://imgur.com/xina1kt

i want items text aligned in center first text field, quantity second text field , in kit check box.

as can see in code, added span tags around text. experimented adding margin properties these span tags, didn't work properly. tried bunch of   works okay atleast need 15 20 of them didn't solve problem.

is there alternative this? try other alternatives p tag too.

thank you.

this can @ least started, it's rows , columns , minor css. problem you'll have on mobile device, if want remain horizontal it'll start break down.

.well-md.well-head {    background: #3973a6;    border: none;    color: #fff;    font-size: 18px;    height: 60px;    text-align: center;  }  .checkbox {    text-align: center;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />  <div class="container">    <form>      <div class="row well-md well-head">        <div class="col-xs-4">          <p>items</p>        </div>        <div class="col-xs-3">          <p>quantity</p>        </div>        <div class="col-xs-3">          <p>in kit</p>        </div>      </div>      <div class="row">        <div class="form-group col-xs-4">          <input type="text" class="form-control" id="unlabelled-items" name="unlabelled-items" placeholder="enter code or description">        </div>        <div class="form-group col-xs-3">          <input type="text" class="form-control" id="quantity" name="quantity" placeholder="enter quantity">        </div>        <div class="form-group">          <div class="form-group col-xs-3">            <div class="form-group">              <div class="checkbox">                <input type="checkbox" id="in-kit" name="in-kit">              </div>            </div>          </div>          <div class="form-group col-xs-2">            <button class="btn btn-primary" id="add-btn">add</button>          </div>        </div>      </div>    </form>  </div>