Text in flex item must wrap, not shift sibling and expand container
<p>I need to fix the position of a flex container that contains two items: a yellow circle and some text.</p>

<p>When I add more text to the <code>p</code> element, the yellow circle shifts to the left. But I need the circle to hold its position. The text element should not expand; it should wrap. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.flex {
  display: flex;
  align-items: center;
  position: absolute;
  right: 14%;
  top: 15%;
}
.flex .item {
  position: relative;
  width: 5rem;
  height: 5rem;
  background: yellow;
  border-radius: 50%;
}
.flex .item span {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 25px;
  transform: translate(-50%, -50%);
}
.flex p {
  margin-left: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex"&gt;
  &lt;div class="item"&gt;
    &lt;span&gt;9&lt;/span&gt;
  &lt;/div&gt;
  &lt;p&gt;Text here&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Here's a <a href="http://codepen.io/palaniichukdmytro/pen/WoOMYB?editors=1100" rel="nofollow noreferrer"><strong>codepen</strong></a>.</p>