JSFiddle - React, Tailwind, and code Playground

HTML

<h1>test</h1>
    
    <form class=formclass>
    
    <div class="inputdata">
        <label for="AccessCode"> Access Code: </label>
        <span><input type="text" name="accessCode" id="AccessCode" value=""  placeholder="" /></span>
        <div class="clear"></div>
    </div>
    
    <div class="input">
        <label for="Code"> Access Code: </label>
        <span><input type="text" name="accessCode" id="AccessCode" value=""  placeholder="" /></span>
        <div class="clear"></div>
    </div>
    </form>

CSS

div.inputdata{
    border:thin solid gray;
    padding:0.1em;
    margin:0.1em;
    }

        div.inputdata label{
        float:left;
        margin-right:10px;
        padding:5px 0;
        color:gray;
        }

        div.inputdata span{
        display: block;
        overflow: hidden;
        
        }

            div.inputdata input{
            width:50%;
            padding-top:8px;
            border:none;
            background:none;
            float:left
            }
            
            div.inputinput{
            width:50%;
            padding-top:8px;
            border:none;
            background:none;
            float:right
            }
            .inputdata,.input {
    display: inline-block;
    
            .formclass{
              width:70%;
              background-color: #ec975e;
            }
  }
            

        .clear {
        clear: both; 
        }