title: How can an element have a width of "100%-50px" using only CSS?
body: <p>Currently I am using JQuery to loop through all elements to resize them accordingly. This is what I do:</p>
  
  <pre><code>$('input.myinput').each(function () {
      $(this).css('width', ($(this).parent().width() - 50) + 'px');
  });
  </code></pre>
  
  <p>This allows the <code>input</code> to be full width with only enough space left for my 50px <code>button</code> on its right.</p>
  
  <p>This executes on window-resize. And there are about 100+ of these inputs on my site.</p>
  
  <p>So are there any other ways to do this? Preferably using only CSS.</p>