JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<dl class="dl-horizontal card-description"> <dt>Label: </dt>

    <dd>Description</dd> <dt>Label 2: </dt>

    <dd>kdsgf dsf dsaf sadg</dd> <dt>Long label: </dt>

    <dd>bla bla bla</dd> <dt>shorty: </dt>

    <dd>bla bla blabla bla blabla bla blabla bla blabla bla bla</dd>
</dl>

CSS

@media all and (min-width: 768px) {
    .card-description > dt, .card-description > dd {
        width: 50%;
        padding-left: 5px;
        padding-right: 5px;
    }
    .card-description > dd {
        margin-left: 50%;
    }
}