Unable to show text along side a drop down in boot

Question

In the second TR, text 'Minutes' is visible by side of TextBox, but in first TR, 'Minutes' is not appearing.

<div class="span6">
    <table class="table">
        <tr>
            <td data-bind="i18nTranslateText: 'abc'"></td>
            <td>
                <select style="width: auto;" data-bind="options: pqr, value: abc.xyz" />
                <span data-bind="i18nTranslateText: 'Minutes'"></span>
            </td>
        </tr>
        <tr>
            <td data-bind="i18nTranslateText: 'abc'"></td>
            <td>
                <input style="width: 25px;" maxlength="2" data-bind="value: dfe.eds" />
                <span data-bind="i18nTranslateText: 'Minutes'"></span>
            </td>
        </tr>
    </table>
</div>

Answer 1

Your problem has nothing to do with Knockout:

you have self-closed your select tag which results in invalid HTML so the browser interprets your span as the content of the select.

To fix this just properly close your select with </select>:

<tr>
    <td data-bind="i18nTranslateText: 'abc'"></td>
    <td>
        <select style="width: auto;" data-bind="options: pqr, value: abc.xyz" >
        </select>
        <span data-bind="i18nTranslateText: 'Minutes'"></span>
    </td>
</tr>