flexボックスのレイアウトで、flexアイテムにflex-shrinkプロパティを指定してテキストが改行されるのを防ぎます。
デモページはこちら

以下のhtml構造で確認します。

<p>flex-shrink: 1（初期値）</p>
<div class="div-parent">
  <div class="div-icon style01">アイコン</div>
  <div>ダミーテキストダミーテキストダミーテキスト</div>
</div>
<div class="div-parent">
  <div class="div-icon style01">アイコンアイコン</div>
  <div>ダミーテキストダミーテキストダミーテキスト</div>
</div>

<p>flex-shrink: 0</p>
<div class="div-parent">
  <div class="div-icon style02">アイコン</div>
  <div>ダミーテキストダミーテキストダミーテキスト</div>
</div>
<div class="div-parent">
  <div class="div-icon style02">アイコンアイコン</div>
  <div>ダミーテキストダミーテキストダミーテキスト</div>
</div>

CSSはflex-shrinkプロパティを初期値の1から0に変更するだけです。flex-shrinkは必ずflexアイテムに指定します。これでアイコンのflexアイテムが文字量よりも狭くなって、文字が改行することはありません。

.div-parent {
  display: flex;
  align-items: center;
  margin: 0 0 1em;
  padding: 10px;
  background: #fff;
}

.div-icon {
  font-weight: bold;
  color: #fff;
  margin-right: 10px;
  padding: 3px 10px;
  background: #f36c49;
}

.style01 {
  flex-shrink: 1;
}

.style02 {
  flex-shrink: 0;
}

flex-shrinkプロパティはflexアイテムの縮小比率を指定します。指定する比率が大きいほど大きく縮小します。0を指定した場合は全く縮小しなくなります。