Относительно расположенный правый столбец перемещается вниз при отображении элемента в левом столбце.

Я пытаюсь создать регистрационную форму для нашего веб-сайта, и это идет хорошо, кроме одной раздражающей проблемы. Форма имеет два столбца, где пользователи вводят свою информацию. Когда я начал создавать элементы для первого (левого) столбца, он автоматически позиционировал их в нужное место, поэтому я закончил делать все поля и переместился во второй (правый) столбец. Мне пришлось позиционировать его с относительным позиционированием, чтобы избежать проблем с переполнением. Теперь в левом столбце у меня есть раскрывающийся список, который отображает текстовое поле при выборе определенной опции. Проблема в том, когда текстовое поле становится видимым, весь правый столбец перемещается вниз. Мне нужна эта колонка, чтобы оставаться на месте, независимо от того, что происходит в первом столбце, но не нужно использовать абсолютное позиционирование. Как это можно сделать? Здесь jsfiddle моделирование моей проблемы.

Пожалуйста, взгляните на эту скрипку, но поскольку stackoverflow хочет, чтобы она сопровождалась кодом, здесь сценарий jQuery для отображения и скрытия текстового поля:

    $(document).ready(function () {
    $("#text1line").hide();
      $("select[name='select1']").change(function() {
        if ($(this).children("option:selected").attr("id") === "show")
        {
          $("#text1line").show();
        } 
        else 
        {
          $("#text1line").hide();
        }
      });
    });