I'm trying to make timer and I want to places these 3 buttons in circle

I'm trying to make stopwatch and I want to put these 3 buttons in a circle but responsive. I have already make a circle that is responsive now I just want to add 3 buttons inside the circle under the timer.

Here is the code: https://jsfiddle.net/obh0mru4/1/

See my result:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stop Watch</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="container mt-5 h-position-relative">
        <div>
            <h1 class="title">Stop Watch</h1>
        </div>

        <div class="circle mt-5">
            <div>
                <h1 id="hour" class="circleContent">00</h1><span class="circleContent-span">:</span>
                <h1 id="min" class="circleContent">00</h1><span class="circleContent-span">:</span>
                <h1 id="sec" class="circleContent">00</h1><span class="circleContent-span">:</span>
                <h1 id="msec" class="circleContent">00</h1>
            </div>
        </div>

        <div class="h-position-absolute h-tl">
            <button onclick="start()">Start</button>
            <button onclick="stop()">Stop</button>
            <button onclick="reset()">Reset</button>
        </div>
    </div>


</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="js/app.js"></script>

</html>

body {
    background: #000428;
    background: -webkit-linear-gradient(to right, #004e92, #000428);
    background: linear-gradient(to right, #004e92, #000428);
}

.title {
    text-align: center;
    color: #fff;
}

.circle {
    margin: 0 auto;
    width: 350px;
    height: 350px;
    line-height: 320px;
    border-radius: 50%;
    text-align: center;
    border: 10px solid #666;
    border-style: double;
}

.circleContent {
    display: inline-block;
    color: #fff;
    font-size: 40px;
    width: 60px;
}

.circleContent-span {
    color: #fff;
    font-size: 40px;
}

.h-position-relative {
    position: relative;
}

.h-position-absolute {
    position: absolute;
}

.h-tl {
    top: smth;
    left: smth;
}