要根据所选国家代码更改下拉列表的宽度，您可以根据国家代码的长度动态调整选择元素的宽度。

const countryCode = [
  { code: "+1", country: "United States" },
  { code: "+44", country: "United Kingdom" }
];

function App() {
  const [selectedCode, setSelectedCode] = useState(countryCode[0].code);

  const handleChange = (event) => {
    setSelectedCode(event.target.value);
  };

  const dropdownWidth = selectedCode.length * 18 + "px"; // Adjust the width based on the length of the code

  return (
    <div className="flex gap-6 flex-col mt-4 text-[#2c3345] font-semibold">
      <label htmlFor="phone">
        Phone Number <span className="text-red-600">*</span>
      </label>
      <div className="flex gap-2 items-center text-[#2c3345] font-semibold">
        <select
          name="dropdown"
          id="dropdown"
          className="py-2"
          style={{ width: dropdownWidth }} // Set the width dynamically using inline styles
          onChange={handleChange}
          value={selectedCode}
        >
          {countryCode.map((element, index) => (
            <option key={index} value={element.code}>
              {element.code} - {element.country}
            </option>
          ))}
        </select>

        <input
          type="tel"
          name="phone"
          id="phone"
          required
          className="bg-transparent outline-none border-b-2 border-[#555959]"
        />
      </div>
    </div>
  );
}

export default App;

字符串

由于dropdown（select）和input组件的父元素都有flex类，这意味着这两个子元素现在都是flex项。
为了使下拉列表只占用所需的空间，可以让input元素占用flex容器中的所有可用空间，这可以通过在input元素中添加grow Tailwind（TW）类（相当于flex-grow: 1;）来实现。
我还建议在select元素的className字段中添加shrink-0 TW类（相当于flex-shrink: 0;），这将使下拉列表元素占用尽可能多的空间，但不允许它收缩更多，以便为input元素腾出更多空间（在本例中不会在新行中断开）。
最终，您的结构应该类似于以下内容：

...

<div className="flex gap-2 items-center text-[#2c3345] font-semibold">
  <select
    name="dropdown"
    id="dropdown"
    className="shrink-0 py-2"
  >
    {countryCode.map((element, index) => (
      <option key={index} value={element.code}>
        {element.code} - {element.country}
      </option>
    ))}
  </select>

  <input
    type="tel"
    name="phone"
    id="phone"
    required
    onClick={() => selectHandler("phone")}
    className={`grow bg-transparent outline-none border-b-2 ${
      selectedLink === "phone"
        ? "border-[#4065fa]"
        : "border-[#555959]"
    } `}
  />
</div>

...

字符串
联系方式：

• grow TailwindCSS
• shrink-0 TailwindCSS