JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
        <ul class="flex-container wrap">
            <li class="flex-item">
                <input type="datetime-local" id="dateField" class="basicInput"/> 
            </li>
            <li class="flex-item">
                <input type="text" id="nameField" class="basicInput" placeholder="  Name:"/>
            </li>
           <li class="flex-item">
                <select id="idType">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
                <input type="text" id="idField" placeholder="  number"/>
            </li>
        </ul>
   </div>

CSS

* {
    border: 1px solid black;
}
.content {
    position: absolute;
    top: 5%;
    left: 25%;
    width: 50%;
    height: 80%;
}

.flex-container {
      position: relative;
      top: 20%;
      /* this is the problem --- left: 15%; */
      flex-wrap: wrap;
      display:    -moz-box;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display:    -moz-flex;
      display:         flex;
      flex-direction: column;
 }

 .flex-item{

     -ms-box-orient: horizontal;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -moz-flex;
      display: -webkit-flex;
      display: flex;
}
.basicInput{

    float: left;
    width: 70%;
}
#idField{

    float: left;
    width: 50%;
}