title: How to use width percentage (%) for text?
body: <p>I have textbox and label. I want to display side by side and want to width: 100% for text (so I need this :text width change when page size change) but I didn't.</p>
  
  <p>this is my code :</p>
  
  <pre><code>&lt;div class="col-xs-6 col-md-6"&gt;
      &lt;div class="form-group clearfix"&gt;
          &lt;label for="UxSearch"&gt;Search:&lt;/label&gt;
          &lt;input type="text" name="UxSearch" id="UxSearch" class="form-control"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my css class: </p>
  
  <pre><code>form-group {
      margin-bottom: 15px;
  }
  
  .form-control {
      display: block;
      width: 100%;
      height: 29px;
      padding: 6px 12px;
      font-size: 12px;
      line-height: 1.25;
      color: #555555;
      background-color: #ffffff;
      background-image: none;
      border: 1px solid #cccccc;
      border-radius: 0px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
      -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
      transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }
  </code></pre>
  
  <p>width : 100% works but text and label are not  in alignment (like photo)
  <a href="https://i.stack.imgur.com/AZUWJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AZUWJ.png" alt="enter image description here"></a></p>
  
  <p>but That's what I want : <a href="https://i.stack.imgur.com/XQRRL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XQRRL.png" alt="enter image description here"></a></p>
  
  <p>I tried display: inline-block but not happend.</p>
  
  <p>Can you help me please ?</p>