mostrar y ocultar elementos rompe el estilo

[gAb1]

Hola buenas, estoy teniendo problemas con el estilo css para mostrar y ocultar input text cuando se checkea un checkbox.

Tengo cuatro <li>, el primero y tercero son los checkboxes y el segundo y cuarto los input text. Necesito que esten alineados horizontalmente, pero que no se mueva nada al aparecer los input text los checkboxes no deben moverse y los input aparezcan a la derecha.

Código (html5) [Seleccionar] Expandir

<ul>
    <li style="margin-top: 9px;">
        <input type="checkbox" id="price1" value="">
        <label for="price1"><span></span>Se Vende</label>
    </li>
    <li class="price-1" style="display: none;">
        <input type="text" placeholder="Precio de Venta" name="price[sale]" /> <span class="unit unit-2">&euro;</span>

    </li>
    <li class="test">
        <input type="checkbox" id="price2" value="">
        <label for="price2"><span></span>Se Alquila</label>
    </li>
    <li class="price-2" style="display: none;">
        <input type="text" placeholder="Precio de Alquiler" name="price[rent]" /> <span class="unit unit-2">&euro;</span>

    </li>
</ul>

Alomejor tengo que cambiar la estructura o es simplemente arreglando el css.

Aquí un link a fiddle: http://jsfiddle.net/nazu61p7/

Gracias!

[#!drvy]

Código (html4strict) [Seleccionar] Expandir

<div id='type'>

   <div class='item'>
       <input type='checkbox' id='price1' value=''>
       <label for='price1'>Se Vende</label>
       <div class='input hide'>
           <input type='text' placeholder='Precio de Venta' name='price["sale"]'>
           <span>&euro;</span>
       </div>
   </div>

   <div class='item'>
       <input type='checkbox' id='price2' value=''>
       <label for='price2'>Se alquila</label>
       <div class='input hide'>
           <input type='text' placeholder='Precio de Alquiler' name='price["rent"]'>
           <span>&euro;</span>
       </div>
   </div>

</div>

Código (css) [Seleccionar] Expandir

#type {
   max-width: 50%;
   border: 1px solid #eee;
}

   #type > .item {
       display: block;
       margin: 5px 0px;
       padding: 9px 0px;
   }

   #type > .item > .input { display: inline-block; }
   #type > .item > .hide { visibility: hidden; }

   #type > .item > .input > input[type='text'] {
       padding: 0.8em 1em;
       font-size: 0.85em;
       border: 1px solid #eee;
       color: #a3a3a3;
       background: white;
       outline: none;
       width: 50%;
       -webkit-appearance: none;
   }

Código (javascript) [Seleccionar] Expandir

$('#type :checkbox').change(function(){
   $(this).parent('.item').find('.input').toggleClass('hide', (!$(this).is(':checked')));
});

No te recomendaría usar listas para estas cosas y menos de la manera de la que lo estas haciendo. El código JS como ves se puede reducir muchísimo empleando toggleClass().

Demo
http://jsfiddle.net/drvy/md23r0jk/1/

PD: No uses estilos dentro del HTML, es feo y poco organizado.

Saludos

[gAb1]

Gracias por la ayuda y los consejos. Tengo que seguir estudiando mucho.

Una duda más, si quiero que haya la misma separación entre el label del checkbox y el div input, ¿cual sería la mejor manera? float left y margin-right pero no queda bien, estoy buscando una mejor manera... Lo facil para mi seria darle a cada .input un margen-left pero para hacerlo como me has enseñado