centering element based on character position

Question

I have dropdown select element like

USA - New York
India - Delhi
Canada - Ottawa
Finland - Helsinki
Luxembourg - Luxembourg

I want to center the elements based on the character '-' position. I have done this assigning id to each of those element and shifting the element which works fine but its not dynamic as I change or add the element I have to change the position. Is there way to center the elements based on the character '-' position ?

Expected result :

       USA - New York
     India - Delhi
    Canada - Ottawa
   Finland - Helsinki
Luxembourg - Luxembourg

http://plnkr.co/edit/Ys0urVnQlFASTudGOsdh?p=preview

Answer 1

You should add elements inside tag, but according to MDN you are only allowed to add text in it. You should consider using another kind of dropdown:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown
                <span class="caret"></span></button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                    <li role="presentation">
                        <a href="#"><div class="row">
                            <div class="col-xs-5 text-right">USA</div>
                            <div class="col-xs-1 text-center">-</div>
                            <div class="col-xs-5 text-left">New York</div>
                            </div></a>
                    </li>
                    <li role="presentation"><a href="#">
                        <div class="row">
                            <div class="col-xs-5 text-right">Delhi</div>
                            <div class="col-xs-1 text-center">-</div>
                            <div class="col-xs-5 text-left">India</div>
                        </div></a>
                    </li>
                    <li role="presentation"><a href="#">
                        <div class="row">
                            <div class="col-xs-5 text-right">Ottawa</div>
                            <div class="col-xs-1 text-center">-</div>
                            <div class="col-xs-5 text-left">Finland</div>
                        </div></a>
                    </li>
                    <li role="presentation"><a href="#">
                        <div class="row">
                            <div class="col-xs-5 text-right">Helsinki</div>
                            <div class="col-xs-1 text-center">-</div>
                            <div class="col-xs-5 text-left">Luxembourg</div>
                        </div></a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-xs-6 output">

        </div>
    </div>
</div>

With some JS to get selected value. Take a look here http://jsfiddle.net/84kx2uub/

Answer 2

You could try a description list. It could be styled to display horizontally similar to this. If the width needs to be 100% you might explore another option for separating the sides than providing "content" after.

HTML

<dl>
    <dt>USA</dt>
    <dd>New York</dd>
    <dt>India</dt>
    <dd>Delhi</dd>
    <dt>Canada</dt>
    <dd>Ottawa</dd>
    <dt>Finland</dt>
    <dd>Helsinki</dd>
    <dt>Luxembourg</dt>
    <dd>Luxembourg</dd>
</dl>

CSS

dd:after {
    clear: both;
}

dt, dd {
    width: 49%;
    float: left;
}

dt {
    text-align: right;
}

dt:after {
    content: " - ";
}

dd {
    margin-left: 5px;
}