заставить элемент dd ниже dt в списке HTML dl

Question

Я не хочу, чтобы мой заголовок и данные располагались рядом выше / ниже:

Номер партии

1001

ПервыйИмя

Джои

Я пытался сделать "разрыв" без эффекта.

 <dl class="dl-horizontal">
            <dt>
                Batch Number 
            </dt>
            <dd>
                @Html.DisplayFor(model => model.RebateDetail.BatchNumber)
            </dd>
            <dt>
                First Name
            </dt>
            <dd>
                @Html.DisplayFor(model => model.RebateDetail.FirstName)
            </dd>

        </dl>

Или, если бы я мог просто получить их на та же строка, которая будет началом:

Вот мои текущие настройки стиля:

  <style>
    *{
        box-sizing: border-box;
    }

    .row {
        display: flex;
    }

    /* Create two equal columns that sits next to each other */
    .inputColumns {
        flex: 33%;
        padding: 10px;
        background-color: bisque;
    }
    .dd {
        margin: 0;
    }
    .dt {
        float: left;
        padding-right: 10px;
    }

</style>

Answer 1

Если вы хотите использовать dd в dt, вы можете просто установить поле 0

<style>dd {margin: 0;}</style>

Если вы хотите, чтобы они были в одной строке, попробуйте это:

<style>
  dt {float: left; padding-right: 10px; }
  dd {margin: 0;}
</style>