How to disable packaging in HTML elements?

Question

I am developing an Ionic application and have problems with my header component. Its elements are wrapped with small screen sizes, and I would like them not to.

Here's the goal:

Here's what is happening now:

I know that I can set a fixed width in the header, but I would not want that. I would also not like to use JavaScript to calculate the width.

Here's the HTML / Angular / Ionic code for the header component:

<h1 *ngIf="backButton; else titleBackButton">{{ title }}</h1> <!-- show if backButton != true -->
<ng-template #titleBackButton> <!-- show if backButton == true -->
  <button ion-button round class="button-back">
    <ion-icon name="arrow-back"></ion-icon>
  </button>
  <h1 class="floated-title">{{ title }}</h1> <!-- this has been floated to the right -->
</ng-template>

Here are my CSS styles:

.button-back {
  margin: 17px 0 0 10px;
}

.floated-title {
  float: right;
}

Answer 1

, , display: flex. flex-wrap: nowrap flex-direction: row.

CSS. .

, React, flex-direction column.

white-space: nowrap , .