JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6 col-lg-offset-3">
      <form class="flexform" action="">
        <div class="flex-group">
          <div class="sendViaContainer">
            <label class="select-flexlabel" for="sendVia" id="sendViaLabel">via 
    <span class="select-wrap">
        <select class="span-select" name="sendVia" id="sendVia">  
          <option value="choose-email">email </option>
          <option value="choose-mobile">mobile </option>
        </select>
    </span>
    </label>
            <div class="choose-email slide-span">
              <input type="text" name="emailAddress" id="emailAddress" value="" placeholder="[email protected]" />
            </div>
            <div class=" choose-mobile slide-span collapse">
              <input type="tel" id="mobileNumber" name="mobileNumber" placeholder="123-456-7890">
            </div>
          </div>
        </div>
        <hr>
        <div class="flex-group">
          <label class="select-flexlabel" for="authSelect">Send code to
        <span class="select-wrap">
        <select name="authSelect" id="authSelect">
          <option value="authSame" selected="selected">address above  </option>
          <option value="authEmail">email address </option>
          <option value="authMobile">mobile number </option>
          <option value="authNone">don't send code </option>
        </select>
           </span>
            </label>
        </div>

        <div class="flex-group">
          <div class="authSame slide-auth">
            <label class="select-flexlabel" for="singleAuthAddress" id="singleAuthLabel">[email protected] 
            </label>
            <input type="hidden" id="singleAuthAddress" name="singleAuthAddress" value="">
     ...

SCSS

* { box-sizing: border-box; }
.flexform {
  margin: 2em auto;
  padding: 1em;
  min-height: 400px;
  font-weight: 400;
  box-shadow: 5px 5px 20px 5px rgba(20, 20, 58, 0.5);
}

.flexform .flex-group {
  display: flex;
  justify-content: space-between;
  align-content: stretch;
  flex-direction: row;
  @media (max-width: 767px) {
    flex-direction: column;
  }
  & input {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    width: 100%;
  }
  & label {
    flex: none;
  }
}
.flexform .flex-group.flex-start {
  justify-content: flex-start;
}
.select-flexlabel {
  position: relative;
  font-weight: inherit;
  margin-bottom: 1em;
}
.flexform select {
  display: inline-block;
}

JavaScript

(function() {

		var animationName = "animated fadeInRight";
		var collapse      = "collapse";
		var animationend  =
		"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
		var $select       = document.querySelector(".span-select");
		var $span         = document.querySelector(".slide-span");

		$select.addEventListener("change", function() {

			var value = "." + this.value;
			$span.className += " " + animationName;
			$span.classList.remove(collapse);

			console.log(value);
			var $not = document.querySelector(".slide-span:not(" + value + ")");
      console.log($not);
      $not.className = $not.className.replace(animationName, "");
			$not.classList.add(collapse);
      console.log($not);

		});

		var $authselect = document.querySelector("#authSelect");
		var $authslide = document.querySelector(".slide-auth");

		$authselect.addEventListener("change", function() {

			var value = "." + this.value;
			$authslide.className += " " + animationName;
			$authslide.classList.remove(collapse);

			console.log(value);
			var $not = document.querySelector(".slide-auth:not(" + value +")")
      $not.className = $not.className.replace(animationName, "");
			$not.classList.add(collapse);

		});

	}());