JSFiddle - React, Tailwind, and code Playground

HTML

<select name="model">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    <option value=":custom">Other...</option>
</select>
<input type="text" value="">

CSS

input {
    display: none;
}

JavaScript

$("select").change(function()
{
	if ($(this).val() == ":custom")
	{
		$(this).css({display:"none"});
		$("input").attr("name", $(this).attr("name"));
		$(this).attr("name", "");
		$("input").css({display:"inline"});
	}
});

$("input").focusout(function()
{
	if ($(this).val() == "")
	{
		$(this).css({display:"none"});
		$("select").attr("name", $(this).attr("name"));
		$(this).attr("name", "");
		$("select").css({display:"inline"});
		$("select").prop('selectedIndex',0);
	}
});