Having problems aligning the elements in HTML

Question

Please see image, want to align it that way

Hi,

I want to position the Verified and RFD to the shown position, With verified above RFD and both aligned properly next to location and air date.

Here's my html

<div class="col-md-10 session-col">
                <table id="session-details" data-bind="css: !$parents[1].newSessionBlocker() ? 'no-session' : ''">
                    <tbody>
                        <tr>
                            <td>
                                <table class="inner-table">
                                    <tr style="min-width: 267px; width: 100%;">
                                        <td class="grey">
                                            <strong class="text-danger">*</strong><label for="sessionType">Session Type</label>
                                        </td>
                                        <td>
                                            <select class="form-control entities form-len" id="sessionDropdown"
                                                    data-bind="disable: sessionHasBeenSaved(),
                                                               event:{ change:$parent.sessionTypeChanged},
                                                               options: $parents[1].sessionTypes,
                                                               value: sessionType,
                                                               optionsCaption: 'Choose...' ,
                                                               css:{ 'cell-error': !$parents[1].newSessionBlocker()}"></select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="grey" style="white-space: nowrap">
                                            <strong class="text-danger">*</strong><label>Session Name</label>
                                        </td>
                                        <td>
                                            <input id="session-name" class="form-control entities" data-bind="value: title, disable: $parent.isSessionReadOnly" required placeholder="Required" maxlength="100" />
                                        </td>
                                  </tr>
                                    <tr>
                                        <td class="grey">
                                            <span class="text-danger" data-bind="visible: sessionType() === document.appConfig.itemTypes.multiSegment">*</span><label>DSID</label>
                                        </td>
                                        <td>
                                            <input class="form-control entities"
                                                   data-bind="value: externalId, disable: $parent.isSessionReadOnly, attr: {placeholder: getMultiSegConditionalRequiredPh}" maxlength="90" />
                                        </td>
                                      </tr>
                                </table>
                            </td>
                                <td>
                                <table class="inner-table">
                                    <tr>
                                        <td class="grey">
                                            <span class="text-danger" data-bind="visible: sessionType() === document.appConfig.itemTypes.multiSegment">*</span><label>Series Name</label>
                                        </td>
                                        <td>
                                            <input class="form-control entities"
                                                   data-bind="value: textTitle, disable: $parent.isSessionReadOnly, attr: {placeholder: getMultiSegConditionalRequiredPh}" maxlength="100" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="grey"><label>Episode #</label></td>
                                        <td>
                                            <input class="form-control entities"
                                                   data-bind="value: episodeNumber, disable: $parent.isSessionReadOnly" maxlength="25" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="grey"><label>Episode Name</label></td>
                                        <td>
                                            <input class="form-control entities"
                                                   data-bind="value: ptsEpisode, disable: $parent.isSessionReadOnly" maxlength="200" />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td class="list3">
                                <div >
                                    <table class="inner-table">
                                        <tr>
                                            <td class="grey"><label>Location</label></td>
                                            <td >
                                                <input class="form-control entities new"
                                                       data-bind="value: location, disable: $parent.isSessionReadOnly" maxlength="250" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="grey"><label class="list3">Air Date</label></td>
                                            <td>
                                                <div style="position:relative; width: 100%">
                                                    <div class='date' id='datetimepicker'>
                                                        <input type="text" id="datepicker" size="10" style="height: 30px;" class="form-control hasDatepicker entities input-datepicker with-calendar-icon"
                                                               data-date-format="mm/dd/yyyy" enable="false" data-bind="numeric: true, value: airDate, disable: $parent.isSessionReadOnly" maxlength="8" />
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="grey"><label>Year</label></td>
                                            <td>
                                                <select class="form-control entities" data-bind="options: $parent.years,
                                                                                    disable: $parent.isSessionReadOnly,
                                                                                    value: year,
                                                                                    optionsCaption: 'Choose...'"></select>
                                            </td>
                                        </tr>
                                    </table>

                                </div>

                            </td>
                            <td>
                                <table class="inner-table">
                                    <tr>
                                        <label  id="description"style="padding-top: 7px;">Description</label>
                                        <textarea class="form-control entities" style="resize: none;" maxlength="4000" id="desc-text"
                                                      data-bind="value: description, disable: $parent.isSessionReadOnly"></textarea>
                                     </tr>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
              </div>
<div class="verify-checkbox" style="margin-left: 21px !important">
                    <div class="checkbox checkbox-primary pull-left">
                        <input type="checkbox" id="logger-verify" data-bind="checked: sessionStatus, disable: !$parent.parentLogger().isContentOwner() || (oldSessionStatus && $parent.parentLogger().isContentOwner())">
                        <label for="logger-verify">Verified</label>

                    </div>
                    <div class="checkbox checkbox-primary pull-left w40">
                        <input type="checkbox" id="logger-rfd"
                               data-bind="checked: readyForDistribution, disable: readyForDistributionDisabled, click: readyForDistributionChange">
                        <label for="logger-rfd">RFD</label>
                    </div>
                </div>


CSS
     #session-details .inner-table tr:last-child > td {
    border-bottom: none !important;
    width:initial;
}

#session-name{
    background:#2A2F3B;
    opacity:10%;
    border-color:#2A2F3B;
    color:#FFFFFF;
}

#sessionDropdown{
    background:#2A2F3B;
    opacity:10%;
    border-color:#2A2F3B;
    color:#FFFFFF;
}


#session-details>tbody>tr>td{
    padding: 0;
    vertical-align: top;
}
#session-details .checkbox{
    margin:0 10px 0 0!important;

}
#session-details{
    margin:5px!important;
    color:#FFFFFF;
}
.verify-checkbox{
    margin:5px!important;
    color:#FFFFFF;
    margin-top:20px;
}


#session-details textarea.form-control {
      height: 90px!important;
      width:80%;
      margin-left:75px;
}
table#session-details.no-session > tbody > tr > td, table#session-details.no-session .inner-table tr {
    display: none;
}

table#session-details.no-session > tbody > tr > td:first-child, table#session-details.no-session .inner-table tr:first-child {
    display: table;    
}

table#session-details.no-session > tbody > tr > td:first-child {}

table#session-details.no-session {
    border: none;
}
#session-details .form-control {
    height: 30px!important;
    left:0px;

}

Please help me..

Answer 1

I would recommend you don't use tables for layouts because it isn't as flexible as other methods and because it is not accessible to screen reader users ( WebAim has some great resources on the subject).

Can you move your veify-checkbox div inside the table as your fifth td ?

Answer 2

I was able to move the check boxes and text beside the items by placing it inside the table as another table-cell. Credit to @Tommaso-Boggia. I then applied some good ole CSS to get them positioned just right. I also added some more margin-left to your Description box. Take a look at the codepen I threw together.

The two pieces of CSS that changed:

#session-details textarea.form-control,
#description{
      height: 90px!important;
      width:80%;
      margin-left:125px;
}

and

.verify-checkbox{
  position:absolute;
  top:0;
  line-height:3;
}