JSFiddle - React, Tailwind, and code Playground

HTML

<div class="time-container">
  <div id="start" align="middle">

                        <h2 class="start-time">start</h2>
                <div class="time">
                        <form class="hour">
                            <input type="text" size="3" maxlength="3" placeholder="hr">
                        </form>
                        :
                        <form class="min">
                            <input type="text" size="3" maxlength="2" placeholder="min">
                        </form>
                        :
                        <form class="sec">
                            <input type="text" size="3" maxlength="2" placeholder="sec">
                        </form>
                </div>
                        <h3></h3>
            </div>
            
            <div class="hyphen">
            &#45;
            </div>
            
            <div id="stop" align="middle">
                        <h2 class="end-time">end</h2>
                <div class="time">
                        <form class="hour">
                            <input type="text" size="3" maxlength="3" placeholder="hr">
                        </form>
                        :
                        <form class="min">
                            <input type="text" size="3" maxlength="2" placeholder="min">
                        </form>
                        :
                        <form class="sec">
                            <input type="text" size="3" maxlength="2" placeholder="sec">
                        </form>
                </div>
                        <h3></h3>
            </div>
</div>

CSS

.time-container{
  display: flex;
  align-content: middle;
}

.hyphen{
  align-self: center;
  margin: 0 20px;
}

h2 {
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
    text-align: left;
    color: gray;
    font-size: 16px;
    font-weight: normal;
    width: 131px;

}

.min, .sec, .hour {
    width: 33px;
    box-sizing: border-box;
    border: 0 solid #ccc;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background: white;
    display: inline-block;

}

h3{
    border-top: 2px solid #ccc;
    width: 131px;
}


*:focus {
    outline: 0;
    box-shadow: none;
}