Place span element near HTML TextBox using Bootstrap

Hi,

I want a equal seperator between the text value and the message indicator.

I want a output something like about but both by "Country" and "city" seperator should be aligned same.

<style type="text/css">
    td
    {
        position: relative;
    }
    input
    {
        padding-right: 60px;
        text-align: right;
    }
    span
    {
        position: absolute;
        right: 5px;
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".custom2").inputmask({
            'alias': 'decimal',
            rightAlign: false,
            'groupSeparator': '.',
            'autoGroup': true
        });
    });
</script>
<table>
    <tr>
        <td>
            <input type="text" id="country" class="custom2" /><span>Country</span>
        </td>
        <td>
            <input type="text" id="city" class="custom2" /><span>City</span>
        </td>
    </tr>
</table>

Thanks

R