title: 3 spans to a row, each in line buy with different widths
body: <p>I'm trying to have 3 spans in a single row.
  The left span is to be a fixed width.
  The right span is to float to the right, also a fixed width.
  The middle span is to consume the space in between both spans.
  These 3 spans are pulled from a database, so there will be multiple rows of differing values in each field except the third span, which will server as a delete button.
  I've tried everything to get them to line up and have been successful so far by making the left display: inline-block and float:left, the right: float:right display:inline-block, but the middle just doesn't want to expand to fill the intervening space between the two spans, even after changing it to display:block.</p>
  
  <p>Some help would be greatly appreciated!</p>
  
  <pre><code>/*Left Span*/
  .word_native{
  float: left;
  clear: left;
  margin-top: 7px;
  height:22px;
  line-height:22px;
  margin-left: 10px;
  margin-right: 10px;
  }
  
  /*Middle Span*/
  .word_foreign{
  margin-top: 6px;
  height:22px;
  height:22px;
  line-height:22px;
  line-height:22px;
  display:inline-block;
  }
  */
  
  /*Right Span*/
  
  float: right;
  clear: right;
  margin-top: 6px;
  </code></pre>