HTML code I used:

<div id="cal-con">
   <h2>0</h2>
   <h4>7</h4>
   <h4>8</h4>
   <h4>9</h4>
   <h4>4</h4>
   <h4>5</h4>
   <h4>6</h4>
   <h4>1</h4>
   <h4>2</h4>
   <h4>3</h4>
   <h4 style="grid-row:5/6 ; grid-column:1/3;">0</h4>
   <h4>.</h4>
   <h4 style="grid-row:2/3 ; grid-column:4/5; " class="operator-btn">/</h4>
   <h4 style="grid-row:3/4 ; grid-column:4/5; " class="operator-btn">x</h4>
   <h4 style="grid-row:4/5 ; grid-column:4/5; " class="operator-btn">-</h4>
   <h4 style="grid-row:5/6 ; grid-column:4/5; " class="operator-btn">+</h4>
   <h4 style="grid-row:6/7 ; grid-column:1/5; " class="operator-btn">=</h4>
</div>

CSS code I used:

/* ---------------- Calculator ---------------- */
#cal-con{
    width: 300px;
    margin: 100px auto;
    background-color: #212141;
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    border-radius: 20px;
}
#cal-con h2{
    background-color: #EFEEFE;
    color: #212141;
    margin: 0;
    padding: 13px 20px 0px 20px;
    height: 53px;
    font-size: 35px;
    grid-column: 1/5;
    grid-row: 1/2;
    border-radius: 10px;
}
#cal-con h4{
    text-align: center;
    background-color: #36355F;
    color: #EFEEFE;
    margin: 0;
    border-radius: 10px;
    height: 45px;
    font-size: 22px;
    padding-top: 20px;
    transition-duration: 0.3s;
}
#cal-con h4:hover{
    cursor: pointer;
    background-color: #6558FF;
    box-shadow: 0px 0px 20px #000;
}
.operator-btn{
    background-color: #FFD33E !important;
    color: #212141 !important;
}
.operator-btn:hover{
    background-color: #d5ad29 !important;
}