title: How to wrap or justicy the contents of PrimeNg's p-timeline
body: <p>I don't know whether wrap is the correct term or justify. I'm using PrimeNg's <code>p-timeline</code>. I'm doing exactly as mentioned in the official documentation:</p>
  <pre><code>&lt;p-timeline [value]=&quot;events&quot; layout=&quot;horizontal&quot;&gt;
      &lt;ng-template pTemplate=&quot;content&quot; let-event&gt;
          {{event.status}}
      &lt;/ng-template&gt;
  &lt;/p-timeline&gt;
  
  ----------------------------------
  events: any[];
  
  ngOnInit() {
    this.events = [
      {status: 'Processing complete', ...},
      {status: 'Processing complete', ...},
      {status: 'Processing complete', ...},
      {status: 'Processing complete', ...}
    ];
  </code></pre>
  <p>I'm displaying the same inside an accordion. On the UI it looks like this:
  <a href="https://i.stack.imgur.com/UNldb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UNldb.png" alt="enter image description here" /></a></p>
  <p>Notice the last event. It is always in two lines. Even if I increase or decrease number of events the last one is always like that:
  <a href="https://i.stack.imgur.com/GYZJL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GYZJL.png" alt="enter image description here" /></a></p>
  <p>This is my CSS:</p>
  <pre><code>.custom-marker {
      display: flex;
      width: 2rem;
      height: 2rem;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      border-radius: 50%;
      z-index: 1;
    }
  </code></pre>
  <p>Is this a known issue? Please help.</p>