JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <dl class="dl-horizontal">
                <dt><label for="card_number">Credit Card Number:</label></dt>
                <dd><input type="text" class="form-control text-line" id="card_number" name="card_number" /></dd>
            </dl>
        </div>
        <div class="col-sm-6">
            <dl class="dl-horizontal">
                <dt><label for="card_expiry">Exp Date:</label></dt>
                <dd><input type="text" class="form-control text-line" id="card_expiry" name="card_expiry" /></dd>
            </dl>
        </div>
    </div>
</div>

CSS

DT {
    line-height: 34px;
}

INPUT.text-line {
    border: none;
    border-bottom: 1px solid #888888;
    
    box-shadow: none;
    -o-box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    
    border-radius: 0;
    -o-border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}