title: float tag down left without breaking word
body: <p><a href="https://i.stack.imgur.com/a9S8O.png" rel="nofollow noreferrer">illustration</a></p>
  
  <p>I would like the "NODEJSasdfasdfasdf" tag to float down let on the line underneath if there is not enough width left. How can I do that?</p>
  
  <p>I expect this to happen:</p>
  
  <pre><code>PYTHON EXAMPLE              |
  NODEJSasdfasdfasdf          |
  </code></pre>
  
  <p>As opposed to this:</p>
  
  <pre><code>PYTHON EXAMPLE NODEJSasdfasd|
  fasdf                       |
  </code></pre>
  
  <p>or this:</p>
  
  <pre><code>PYTHON EXAMPLE NODEJSasdfasdfasdf
                              |
  </code></pre>
  
  <hr>
  
  <p>Note that there could be eg. 8 tags and so it might be the 3. and 5. tag that needs to pushed down left onto the line underneath.</p>
  
  <hr>
  
  <p>css</p>
  
  <pre><code>ul#mix-wrapper {
      ul {
          padding: 0;
      }
  
      list-style: none;
      //word-wrap: break-word;
  
      li {
          display: inline-block;
      }
  
      .card-tags ul {
          margin-block-start: 12px;
          margin-block-end: 12px;
          float: left;
      }
      .card-tags ul li {
          display: inline;
          width: fit-content;
  
      }
      .tag {
          background-color: #989898;
          margin: 4px;
          word-wrap: break-word;
      }
  }
  </code></pre>
  
  <p>pug</p>
  
  <pre><code>li.mix.catC
      div test3
          .card(style='width: 18rem;')
              img.card-img-top(src='/images/pug3.jpg', alt='Card image cap')
              .card-body
                  p.card-text
                      | C
                  .card-tags
                      ul
                          li.tag PYTHON
                          li.tag EXAMPLE
                          li.tag NODEJSasdfasdfasdf
  </code></pre>