title: Set border based on padding from content
body: <p>As far as I know padding is the space between border and content. I tried using padding but instead of the border shrinking down to the content, the content gets pushed to a new line.</p>
  
  <p>What I want is the content to stay but the border autoscale/auto size to the content. And if possible, if the content is resized (let's say different reso or the browser window gets smaller), the border also follows the content but still keeping the padding value (in my case, 10px)</p>
  
  <p>Been playing around with margin and padding since yesterday, but still no idea how to do it.
  Any help will be really appreciated, guys. </p>
  
  <p>td;dr: How to get border to autosize/autoscale to content.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="container"&gt;
  
      &lt;div id="eachitem"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#container {
      margin: 0px 60px 0px;
  
  }
  
  #eachitem {
      padding: 5px 2px 5px 5px;
      border: 5px solid black;
  }
  </code></pre>
  
  <p>Container is for position the whole content into postion based on margin.
  Each item is for an individual item based on a list. That is where I want the border to autosize/autoscale to, to the items.</p>
  
  <p>Since different content have different length. I want it to scale down to the max content as shown in image below:
  <img src="https://i.stack.imgur.com/1o8aq.png" alt="Example"></p>