JSFiddle - React, Tailwind, and code Playground

by Bacher

HTML

<div class="on dx-fieldset">
    <div class="dx-field dx-clearfix">
        <div class="dx-field-label">Label</div>
        <div class="dx-field-value dx-widget input"></div>
    </div>
</div>

<div class="in dx-fieldset">
    <div class="dx-field dx-clearfix">
        <div class="dx-field-label">Label</div>
        <div class="dx-field-value">
            <div class="dx-widget input"></div>
        </div>
    </div>
</div>

CSS

.input {
    height: 30px;
    background-color: red;
}

.dx-field {
    padding: 6px;
    position: relative;
   
    min-height: 27px;
}

.dx-field-label {
    float: left;
    width: 40%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    
    padding-top: 5px;
    padding-bottom: 5px;
}

.dx-field-value {
    float: right;
    width: 60%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
}

.dx-clearfix:before,
.dx-clearfix:after {
    display: table;
    line-height: 0;
    content: "";
}

.dx-clearfix:after {
    clear: both;
}

.dx-field-value:not(.dx-widget) {
    position: absolute;
    
    right: 6px;
    top: 50%;
    left: 40%;
    
    margin-top: -1em;
}