title: React: how to make an input only as wide as the amount of text provided?
body: <p>Simple enough question:
  <strong>I am trying to create inputs that are as large as the text supplied to them.</strong></p>
  <p>Sandbox: <a href="https://codesandbox.io/s/long-snowflake-6u13n?file=/src/Test.jsx" rel="noreferrer">https://codesandbox.io/s/long-snowflake-6u13n?file=/src/Test.jsx</a></p>
  <p>My design intention is to generate inputs dynamically and then allow the user to have styles specific to each input that visually help break up each sentence based on outside events. But before I can move forward, it's really important that my input container <strong>is only</strong> as large as the text within.</p>
  <blockquote>
  <p>why not use a textarea? -- I have data that is particular to each sentence that I want to create unique styles for.</p>
  </blockquote>
  <p>Any thoughts?</p>