title: CSS border around div containing span while fitting to content perfectly
body: <p>I am trying to have a <code>div</code> wrapping a <code>span</code> element in this way:</p>
  
  <pre class="lang-sh prettyprint-override"><code>----------
  |Sentence|
  ----------
  
  -----------------
  |It's a looooong|
  |sentence       |
  -----------------
  </code></pre>
  
  <p>It works for short sentences but not for long because the end result is like:</p>
  
  <pre class="lang-sh prettyprint-override"><code>----------------------
  |It's a loooong      |
  |sentence            |
  ----------------------
  </code></pre>
  
  <p>The code is like:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.div-with-border {
      display: inline-block;
      border: 1px solid red;
  }
  .div-with-border span {
      display: block;
  }
  
  table{
      width: 100px;
      font-size: 16px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;th width="50%"&gt;&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;div class="div-with-border"&gt;
          &lt;span&gt;Sentence&lt;/span&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;
         &lt;div class="div-with-border"&gt;
           &lt;span&gt;It's a loooooong sentence&lt;/span&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I basically want to remove the blank gap that exists between the word break and the right limit of the <code>div</code> edge, as shown in the example above.</p>