How to prevent the text from moving to the left edge? It is necessary that "Select a city ..." be within the span block and be under "Select a country ..."

http://jsfiddle.net/4aPe2/5/

.item { height: 30px; } .item span.tlt { min-width: 200px; display: inline-block; } span.tlt { color: gray; text-align: right; padding-right: 20px; vertical-align: top; } .info { width: 390px; } 
 <div class="info"> <div class="item"><span class="tlt">Город:</span> <span>Выберите страну..., Выберите город...</span></div> </div> 

    3 answers 3

    Set the desired id to the span, for example "text". We write css properties:

     #text { float: right; width: 170px; 

    }

    http://jsfiddle.net/4aPe2/9/

     .item { height: 30px; } #text { float: right; width: 170px; } .item span.tlt { min-width: 200px; display: inline-block; } span.tlt { color: gray; text-align: right; padding-right: 20px; vertical-align: top; } .info { width: 390px; } 
     <div class="info"> <div class="item"><span class="tlt">Город:</span> <span id="text">Выберите страну..., Выберите город...</span> </div> </div> 

      Set a class with a choice of city and country class (for example tlt1) and change its properties as needed.

       .tlt1 { float: right; } 

      Put the tag line break (
      ) after "Select a country ..."

      http://jsfiddle.net/4aPe2/11/

       .item { height: 30px; } .item span.tlt { min-width: 200px; display: inline-block; } span.tlt { color: gray; text-align: right; padding-right: 20px; vertical-align: top; } .tlt1 { float: right; } .info { width: 390px; } 
       <div class="info"> <div class="item"><span class="tlt">Город:</span> <span class="tlt1">Выберите страну...,<br />Выберите город...</span> </div> </div> 

         .item { height: 30px; } .tlt { min-width: 200px; display: inline-block; } .tlt { color: gray; text-align: right; padding-right: 20px; vertical-align: top; } .info { width: 390px; } .val { display: inline-block; } 
         <div class="info"> <div class="item"><span class="tlt">Город:</span> <span class="val">Выберите страну...,<br>Выберите город...</span></div> </div>