JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="flex-item" id="show-first">Enter the name
        <input type="text" name="name" id="name"></input>
        <input type="submit" name="Play" id="play"></input>
    </div>
    <div class="flex-item" id="show-after">After input taken show these to full container
    </div>
</div>

JavaScript

$(function() {
  document.getElementById('show-after').style.display = 'none';
  
});
$('input[name=Play]').click(function(){
    var name = $('input[name=name]').val();
   	document.getElementById('show-first').style.display = 'none';
    document.getElementById('show-after').style.display = 'block';
});