title: How to make the width fit to the content when text wrapped?
body: <p>I'm using tailwind to create a card with an arrow. I want the arrow always next to the text 10px. But when the text is wrapped, the width of the text is larger than the actual width of the text.</p>
  <p><a href="https://i.stack.imgur.com/P7o2W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P7o2W.png" alt="enter image description here" /></a></p>
  <p>I tried adding <code>width: fit-content</code> but the text will overflow and can't wrap. If I add <code>width: min-content</code> then the text always wraps.</p>
  <p>I must use javascript to get the actually width of the text in this case, right?</p>
  <p>Here is my code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;grid grid-cols-3 gap-8 m-20 lg:max-w-[1200px]&quot;&gt;
    &lt;div class=&quot;w-full h-52 overflow-hidden shadow-xl p-8 flex items-center justify-start gap-4&quot;&gt;
      &lt;div class=&quot;min-w-[80px] min-h-[80px] bg-blue-500&quot;&gt;&lt;/div&gt;
      &lt;p class=&quot;text-xl font-bold&quot;&gt;Software Solutions&lt;/p&gt;
      &lt;svg width=&quot;7&quot; height=&quot;12&quot; viewBox=&quot;0 0 7 12&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
        &lt;path d=&quot;M1.78125 0.75L6.25 5.5C6.375 5.65625 6.46875 5.84375 6.46875 6C6.46875 6.1875 6.375 6.375 6.25 6.53125L1.78125 11.2812C1.5 11.5938 1.03125 11.5938 0.71875 11.3125C0.40625 11.0312 0.40625 10.5625 0.6875 10.25L4.6875 6L0.6875 1.78125C0.40625 1.46875 0.40625 1 0.71875 0.71875C1.03125 0.4375 1.5 0.4375 1.78125 0.75Z&quot; fill=&quot;#333940&quot; /&gt;
      &lt;/svg&gt;
    &lt;/div&gt;
  
    &lt;div class=&quot;w-full h-52 overflow-hidden shadow-xl p-8 flex items-center justify-start gap-4&quot;&gt;
      &lt;div class=&quot;min-w-[80px] min-h-[80px] bg-blue-500&quot;&gt;&lt;/div&gt;
      &lt;p class=&quot;text-xl font-bold pr-0 w-[fit-content]&quot;&gt;Business process solutions&lt;/p&gt;
      &lt;svg width=&quot;7&quot; height=&quot;12&quot; viewBox=&quot;0 0 7 12&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
        &lt;path d=&quot;M1.78125 0.75L6.25 5.5C6.375 5.65625 6.46875 5.84375 6.46875 6C6.46875 6.1875 6.375 6.375 6.25 6.53125L1.78125 11.2812C1.5 11.5938 1.03125 11.5938 0.71875 11.3125C0.40625 11.0312 0.40625 10.5625 0.6875 10.25L4.6875 6L0.6875 1.78125C0.40625 1.46875 0.40625 1 0.71875 0.71875C1.03125 0.4375 1.5 0.4375 1.78125 0.75Z&quot; fill=&quot;#333940&quot; /&gt;
      &lt;/svg&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>