Как показать dt и dd списка определений в одной строке?

---

Я хочу показать несколько строк данных на странице сведений, каждая из которых имеет заголовок и данные в одной строке. Данные показывают нормально, но так как мои заголовки немного длинноваты, они не вписываются в одну строку. Он простирается до следующей строки. Например, я хочу название "Взаимодействие спикера с аудиторией"чтобы показать в одной строке/строке, вместо этого он показывает на 2 строках, как это

Взаимодействие спикера
с аудиторией

Я уже некоторое время играю с css, но, похоже, ничего не работает. Может ли кто-нибудь помочь мне в части укладки?


Что я уже пробовал:

Это структура моего кода

<div>
    <h4>IndividualSessionEvaluation</h4>
    <hr />
    <dl class="dl-horizontal">

        <dt>
            @Html.DisplayNameFor(model => model.OnScreenPresentation)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.OnScreenPresentation)
        </dd>   

        <dt>
            @Html.DisplayNameFor(model => model.SpeakersSubjectKnowledge)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.SpeakersSubjectKnowledge)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.SpeakersInteractionwithAudience)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.SpeakersInteractionwithAudience)
        </dd>
    </dl>
</div>

И мой стиль код

<style>
    dl {
        width: 395px;
        font-size: 15px
    }

    dd, dt {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    dt {
        float: left;
        padding-right: 5px;
        font-weight: bolder;
    }

    dt {
        clear: left;
    }

    dt, dd {
        min-height: 1.5em;
    }
</style>

---