JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><label for="name">Name: </label><input id="name" name="name" type="text" /></li>
    <li><label for="person1">Person 1: </label><input id="person1" name="person1" type="text" /></li>
    <li><label for="person2">Person 2: </label><input id="person2" name="person2" type="text" /></li>
    <li><label for="person3">Person 3: </label><input id="person3" name="person3" type="text" /></li>
    <li><label for="hobby">Hobby: </label>
        <select name="Hobby" id="hobby">
            <option value="0">not selected</option>
            <option value="1">swimming</option>
            <option value="2">gaming</option>
            <option value="3">stackoverflow</option>
            <option value="4">open-source</option>
            <option value="5">martial arts</option>
            <option value="6">parkour</option>
            <option value="7">sleeping</option>
        </select>
    </li>
</ul>

CSS

body {
    font-family: Arial, sans-serif;
    font-size: 13px;
}

li {
    margin: 12px 0;
    padding-bottom: 10px;
    border-bottom: 1px dotted #ccc;
}

li label {
    display: inline-block;
    width: 80px;
    vertical-align: baseline;
    text-align: right;
    margin-right: 20px;
}

li input, li select {
    padding: 3px 4px 4px;
    width: 300px;
    border: 1px solid #ccc;
    font-size: 13px;
}