JSFiddle - React, Tailwind, and code Playground

HTML

<div class="video-wrapper">
    <video id="movie">
        <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
        <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
    </video>
    <div class="controls">
        <button class="play-pause">Play</button>
        <div class="progress-bar-wrapper">
            <span class="progress-bar"></span>
        </div>
        <div class="display-status">00:00</div>
    </div>
</div>

CSS

.video-wrapper {
    position: relative;
    width: 450px;
    height: 250px;
    font-size: 0;
}

video {
    width: 100%;
    height: 100%;
}

.controls {
    position: absolute;
    width: calc(100% - 20px);
    padding: 10px;
    background: rgba(119, 123, 123, 0.5);
    font-size: 1rem;
}

.controls * {
    float: left;
    margin-right: 10px;
}

.controls :last-child {
    margin-right: 0;
}

.controls:after {
    content: '';
    display: table;
    clear: both;
    height: 0;
}

.progress-bar-wrapper {
    display: inline-block;
    width: 75%;
    height: 20px;
    border: 1px solid #000;
}

.progress-bar {
    display: inline-block;
    height: 10px;
    background: red;
}