title: I want 2 widgets side-by-side to fill 100% of div
body: <p>In wordpress, I have 2 widgets of different widths which I want to sit side-by-side and fill the entire width of my main content divider (these are not sidebar widgets).  I've already got the widgets made and they basically look correct, but I have trouble getting them to fill exactly 100% of the divider.  To play with the widget size, I'm adjusting the following code in style.css:</p>
  
  <p>DIVIDER <br> .col-940 {width: 100%;}</p>
  
  <p>WIDE WIDGET <br> .col-540 {width: 57.446808510638%;}</p>
  
  <p>NARROW WIDGET <br> .col-340 {width: 36.63%;}</p>
  
  <p><br> </p>
  
  <p>PROBLEM #1:
  When I tweak the widths they end up either not filling the space completely, or overfilling it and bumping the 2nd widget down to the next row.</p>
  
  <p>PROBLEM #2:
  When viewing the site on a mobile device, the widgets naturally stack up and cannot sit side-by-side (no problem here, this is desired).  However, the widths of each widget are supposed to stretch to 100% of the available space, right?  Instead they appear to vary in width 10-20%.</p>
  
  <p>`</p>
  
  <p>|-------------------------------------| |----------------------|</p>
  
  <p>|-------------------------------------| |----------------------|</p>
  
  <p>|-------------------------------------| |----------------------|</p>
  
  <p>|-------------------------------------| |----------------------|</p>
  
  <p>|-------------------------------------| |----------------------|</p>
  
  <p>`</p>