JSFiddle - React, Tailwind, and code Playground

by eventide

HTML

<div id="addEditTitleRow" class="oneCellRow">
    <label for="txtTitle">Title</label>
    <br>
    <input type="text" id="txtTitle" size="60">
</div>
<div id="addEditDirectorRow" class="multiCellRow">
    <div id="addEditSelectDirectorCell" class="halfRowCell">
        <div id="selectDirector">
            <label for="ddlDirector">Director</label>
            <br>
            <select type="select" id="ddlDirector"></select>
        </div>
    </div>
    <div id="addEditNewDirectorCell" class="halfRowCellRight">
        <div id="addNewDirector">
            <div id="newDirectorFirstName">
                <label for="txtNewDirectorFirstName">First Name</label>
                <br>
                <input type="text" id="txtNewDirectorFirstName" size="20">
            </div>
            <div id="newDirectorLastName" style="float: right; margin-top: -40px;">
                <label for="txtNewDirectorLastName">Last Name</label>
                <br>
                <input type="text" id="txtNewDirectorLastName" size="20">
            </div>
        </div>
    </div>
</div>
<div id="addEditRatingYearRunTimeRow" class="multiCellRow">
    <div id="addEditMpaaRatingCell" class="threeCellRowOutsideCell">
        <label for="ddlMpaaRating">MPAA Rating</label>
        <br>
        <select type="select" id="ddlMpaaRating"></select>
    </div>
    <div id="addEditYearReleasedCell" class="threeCellRowInsideCell">
        <label for="txtYearReleased">Year Released</label>
        <br>
        <input type="text" id="txtYearReleased" size="4" maxlength="4">
    </div>
    <div id="addEditRunTimeCell" class="threeCellRowOutsideCell">
        <label for="txtRunTime">Run Time (in minutes)</label>
        <br>
        <input type="text" id="txtRunTime" size="4" maxlength="4">
    </div>
</div>
<div id="addEditGenreRow" class="multiCellRow">
    <div id="addEditGenre1Cell" class="halfRowCell">
        <select type="select" id="ddlGenre1"></select>
    </div>
    <div...

CSS

.tblTable { width: 100%; }
.multiCellRow { width: 100%; }
.fullRowCell {
	clear: left;
	width: 100%; }
.halfRowCell {
	float: left;
	width: 50%;
}
.halfRowCellRight { float: right; width: 50%; }
.threeCellRowOutsideCell {
	float: left;
	width: 33%;
}
.threeCellRowInsideCell {
	float: left;
	width: 34%;
}