JSFiddle - React, Tailwind, and code Playground

by LW

HTML

<div class="container">
    <label class="select-nlflabel fixed" for="how-send" id="how-send-label">via 
    <span class="select-wrap">
        <select class="span-select fixed" name="how-send" id="how-send">  
          <option value="choose-email">email &nbsp;</option>
          <option value="choose-mobile">mobile &nbsp;</option>
        </select>
    </span>
    </label>
      <div class="item choose-email slide-span">
          <input class="" type="text" name="email" id="email" value="" placeholder="[email protected]"/>
      </div>
      <div class="item choose-mobile slide-span collapse">
      <div class="absolute fixed">flags </div>
          <input type="tel" id="phone" class="" placeholder="123 456 7890">
      </div>
</div>
  <!--  <div class="fixed" style="background: red">a a a a Fixed</div> -->
    <!-- <div class="item grow" style="background: green">b b b b b b</div> -->
    <!-- <div class="item grow" style="background: blue">c</div> -->

SCSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;    
}

.container {
    //flex-grow: 1;
    //flex-shrink: 0;
    //flex-basis: auto;
    display: flex;
    flex-direction: row;
    width: 100%;
}

.item {
    flex-grow: 1;
    visibility: visible;
    max-width: 2000px;
    max-height: 2000px;
    white-space: nowrap;
    transition: all .2s;
}

.collapse {
    flex-grow: 0;
    visibility: collapse;
    max-width:0;
    max-height: 0;
    
   
}
.fixed {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto
}
input {
  //display: inline-block;
  width: 100%;
}
.absolute {
  position:absolute;
  top:0;
  bottom:0;
}
#phone {
  padding-left: 52px;
}

JavaScript

/* $(".item").click(function() {
    $(this).removeClass('collapse');
    $(".item").not(this).each(function() {
        $(this).addClass("collapse");    
    });
    
    
}); */

$(function() {
   var $select = $(".span-select"),
       $span =  $(".slide-span");

   $select.on("change", function() {
     var value = '.' + $(this).val();
     $span.removeClass('collapse').not(value).addClass("collapse");
   });
 });