title: New line issue when testing mobile app on a real devise (iPhone - Safari)
body: <p>I have a mobile app, which contains a manually created icon - a circle with some text and number inside. It looks and works perfectly when testing it on PC; however, on a mobile device - text gots broken to a new line. I am sure there is enough space for it.</p>
  
  <p>My question is - what can be the issue (something wrong in my CSS?), and how can it be fixed (for example, force it staying on the same line)?</p>
  
  <p>CSS</p>
  
  <pre><code>.title-circle {
    width: 65px;
    height: 65px;
    background-color: #eb5505;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-right: 0.9375rem;
  }
  .title-circle-txt {
    position: relative;
    top: 0.2em;
    color: #fff;
    text-align: center;
    font-size: 9.5px;
  }
  .title-circle-txt span {
    font-size: 24px;
    display: block;
    line-height: 1;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;span class="title-circle"&gt;
  &lt;span class="title-circle-txt"&gt;
  Point
  &lt;span&gt;1&lt;/span&gt;
  &lt;/span&gt;
  &lt;/span&gt;
  </code></pre>