JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
    <style type="text/css">
      #if_girl{display: none;clear: both;}
      #ifn_girl{display: none;clear: both;}
     hr.separator { border: 0; margin: 0; opacity: 0; visibility: hidden; height: 0;
}
    </style>
  </head>
  <body>
    <select id="is_girl" onChange='showSelect()'>
      <option value='0'>Мальчик</option>
      <option value='1'>Девочка</option>
    </select>
    <hr class="separator"></hr>
    <select id="if_girl" onChange='showSelect()'>
      <option value="1">Собака</option>
      <option value="0">Кошка</option>
    </select>
    <hr class="separator"></hr>
    <select id="ifn_girl" onChange='showSelect()'>
      <option value="1">Пёс</option>
      <option value="0">Кот</option>
    </select>
    <script>
      const isGirl = document.getElementById("is_girl").value;
      if(isGirl == 1){
        document.getElementById("if_girl").style.display = "inline";
        document.getElementById("ifn_girl").style.display = "none";
      }
      else if(isGirl == 0){
        document.getElementById("ifn_girl").style.display = "inline";
        document.getElementById("if_girl").style.display = "none";
      }
      function showSelect(){
        const isGirl = document.getElementById("is_girl").value;
        if(isGirl == 1){
          document.getElementById("if_girl").style.display = "inline";
          document.getElementById("ifn_girl").style.display = "none";
        }
        else if(isGirl == 0){
          document.getElementById("ifn_girl").style.display = "inline";
          document.getElementById("if_girl").style.display = "none";
        }
      }
    </script>
  </body>
</html>