JSFiddle - React, Tailwind, and code Playground

by epoch

HTML

<div class="container">
    <div class="time-container">
        <div class="time-control">
            <input id="time-1" type="text" placeholder="Years">
        </div>
        <div class="time-control">
            <input id="time-2" type="text" placeholder="Months">
        </div>
        <div class="time-control"> 
            <input id="time-3" type="text" placeholder="Days">
        </div>
        <div class="time-control">
            <input id="time-4" type="text" placeholder="Minutes">
        </div>
        <input id="time-full" type="text" disabled="disabled">
    </div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
    
    margin: 0;
    padding: 0;
    
    font-family: Arial;
    font-size: 8pt;
}

div.container {
    width: 450px;
    border: 1px solid #aaa;
    margin: 10px auto;
    padding: 10px;
}

div.time-container {
    width: 100%;   
    
    padding: 0;
    margin: 0;
}

div.time-container > input {
    width: 100%;   
}

div.time-container > div.time-control {
    display: inline-block;
    width: 24.5%;
    
    padding: 0;
    margin: 0;
}

div.time-container > div.time-control > input {
    width: 100%;
    margin: 1px;
}

div.time-container > div.time-control > label:after {
    content: " : ";
}