With Tailwind, make rows only as wide as the content needs

Question

I want the text box to take up almost all the space and the select box only the space it needs. Currently both rows have the same width and the selection doesn't take up that space, at least not in tablet mode. I used Tailwind to implement the style

 <div className="grid grid-flow-row auto-rows-max items-center  justify-items-center  space-y-5 p-25 mx-10">
   <div className=" col-span-2 md:col-span-1 w-52 ">
      <div>
        <select      
          className="bg-gray-50 border p-4 border-gray-300 text-gray-900 text-sm rounded-lg block w-full  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white "
        >
         <option>...</option>         
        </select>
      </div>
    </div>

     <div className="w-full col-span-1">
      <div>
        <input           
          type="text"
          value={title}
          placeholder="Title"
          className="border outline-none p-4 rounded-md w-full"
        ></input>
      </div>
    </div>
</div>

Answer 1

NOTE: This can be done with an arbitrary value grid-cols-[13rem_1fr] and does not require extending the Tailwind config as explained below in the original answer. Demo: https://play.tailwindcss.com/RvCld3UV42

The first column has a width w-52 (13rem) and the second column you want to take up the remaining space.

To achieve this we need to set grid-template-columns: 13rem 1fr;

In the Tailwind config we extend the gridTemplateColumns:

    extend: {
      gridTemplateColumns: {
        // Custom column configuration
        'give-away': '13rem 1fr',
      }
    },

We can then use grid-cols-give-away for the custom column config. The first column is set to w-52 and the second column uses w-full.

<div className="grid grid-cols-give-away items-center justify-items-center space-y-5 p-25 mx-10">
   <div className="w-52">
      <div>
        <select      
          className="bg-gray-50 border p-4 border-gray-300 text-gray-900 text-sm rounded-lg block w-full  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white "
        >
         <option>...</option>         
        </select>
      </div>
    </div>

     <div className="w-full">
      <div className="">
        <input           
          type="text"
          value={title}
          placeholder="Title"
          className="border outline-none p-4 rounded-md w-full"
        ></input>
      </div>
    </div>
</div>

View as a Tailwind Playground: https://play.tailwindcss.com/ER6k4rviSb