CSS, изменить размер встроенных элементов в соответствии с шириной блока

Question

мне нужно выровнять элементы в двух разных элементах div.

my css

    div.details-box {      
        display:inline-block;
        *display:inline;
        width:850px;    
        margin-right:100px;
        margin-left:200px;
        margin-top:50px;
        border:1px solid #000;
        background:#eee;
        border-radius:5px;
        -moz-border-radius:5px; 
       direction:rtl;      
   }
   div.details-box div.row
   {
      display:block;    
      width:850px;
      margin:auto;
      margin-bottom:8px;            
      border:2px solid red;
      padding-right:150px;
   }
   div.details-box div.row div.inline-wraper
   {
      display:inline-block;   
      width:250px;
      border:1px solid blue;    
   }

my html:

<div class="details-box">
   <div class="row"> 
       <div class="inline-wraper">
           <span> element 1 </span>
           <asp:TextBox ID="txt_pwd" runat="server" TextMode="Password"></asp:TextBox>   
       </div>
   </div>
   <div class="row"> 
       <div class="inline-wraper">
           <span> element 2 </span>
           <asp:TextBox ID="txt_pwd" runat="server" TextMode="Password"></asp:TextBox>   
       </div>
   </div>
</div>

пример 2 невыровненных inline-wrapers

Я ищу способ изменить размеры моих промежутков, чтобы встроенные обертки могли «совмещаться» друг с другом, или какой-то другой подход к архивированиюэто без игры с отступом верхнего, чтобы соответствовать всей ширине обертки (причина в том, что это повторяющаяся проблема).

Я надеюсь, что это было достаточно ясно, спасибо заранее.

Answer 1

Не уверен, что я правильно понял ваш вопрос.

В любом случае, если вам не нужна фиксированная ширина для вашего диапазона, вы можете использовать:

span {
   width: 90px;
   float: right;
}

Если фиксированная ширинаэто проблема, может быть, вы могли бы использовать <table>.