Блог

У меня есть этот код с использованием HTML, Javascript :

Вот HTML-код :

 <input type="text" id="date1" name="date1"/>
<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>
  

Вот мой код: https://jsfiddle.net/6egzaj3q /

Но я хотел бы не иметь разницы между выбором и выбором даты, а также иметь одинаковую высоту для выбора даты и выбора, я имею в виду что-то вроде этого :

Чего я хочу

Не могли бы вы мне помочь, пожалуйста?

Оберните их input и select в новый div и внедрите display: flex макет для этого div селектора, и пробелы будут удалены.

 <div style="display: flex">
  <input type="text" id="date1" name="date1" />
  <select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
  </select>
</div>
  

Вот рабочий фрагмент.