title: display inline-block doesn't work with width 100%
body: <p>I want to have a checkbox and text input, both of them will be in one line, the text input is responsive. I tried display inline-block, it worked but I can't make the text input to fill rest of the screen with width 100%, it will go down, why?</p>
  
  <p><a href="https://jsfiddle.net/shk4v0ep/" rel="nofollow noreferrer">https://jsfiddle.net/shk4v0ep/</a></p>
  
  <pre><code>&lt;div&gt;
    &lt;div class="left-wrap"&gt;
      &lt;input type="checkbox" value="others" /&gt;
      &lt;label&gt;Others&lt;/label&gt;
    &lt;/div&gt;
    &lt;input type="text" value="" /&gt;
  &lt;/div&gt;
  
  .left-wrap {
    display: inline-block;
  }
  
  input[type="text"] {
    display: inline-block;
    //width:100%; how to make the input to fill till the rest of the screen
  }
  </code></pre>