title: Reduce content width so that next column content can be displayed right next to it
body: <p>I need to reduce the width of the <code>&lt;p&gt;&lt;/p&gt;</code> element so that the <code>filters applied:</code> text and <code>Division</code> (which is the name of the filter that has been applied) are next to each other. I mean, it should look like <code>filters applied:</code> and <code>Division</code>.</p>
  <p><a href="https://i.stack.imgur.com/bNEDK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bNEDK.png" alt="enter image description here" /></a></p>
  <p>This is the <code>HTML</code> code that I have at the moment:</p>
  <p><a href="https://jsfiddle.net/dashamlav/nsmj0peL/4/" rel="nofollow noreferrer">JSFiddle</a></p>
  <p>If we stretch-out the output screen on Fiddle, we see the gap between <code>filters applied:</code> and <code>Division</code>.</p>
  <p>I tried using <code>width: 50%</code>, and lower value as well for the <code>&lt;div&gt;&lt;/div&gt;</code>, but it did not work. I think I am missing something here.</p>
  <p><strong>EDIT: JSFiddle Output</strong>
  <a href="https://i.stack.imgur.com/jsqEt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jsqEt.png" alt="enter image description here" /></a></p>