JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <form id="form1" method="post" action="">
        <p>
            <label for="name" class="title">Your name:</label>
            <input name="name" type="text" class="widebox" id="name">
        </p>
            <p><label for="name" class="title">Colour:</label>
            <select name="colour_pref" size "1">
                <option value="1">Pink</option>
                <option value="2">Blue</option>
                <option value="3">White</option>
            </select>
            <label for="name" class="title">Colour:</label>
            <select name="colour_pref" size "1">
                <option value="1">Pink</option>
                <option value="2">Blue</option>
                <option value="3">White</option>
            </select>
        </p>
        <p class="submit">
            <input type="submit" name="add" value="add_colour" id="add" />
        </p>
    </form>
</div>

CSS

#content p {
    border-bottom: 1px solid #efefef;
    margin: 10px;
    padding-bottom: 10px;
    width: 260px;
    text-align:left;
}
.title {
    float: left;
    width: 100px;
    text-align: right;
    padding-right: 10px;
}
.submit {
    text-align: right;
}
.submit input {
    margin-left:110px;
}