I'm creating a sample tables,inputs and containers with (pure) HTML and CSS. The height is showing other than what i'm giving in the CSS. For example, Given height is 44px but in browser it is showing as 73px.

Why this is happening?

Is there any fault in my code?

[![Sample image](https://i.stack.imgur.com/fkT6B.png)](https://i.stack.imgur.com/fkT6B.png)

My sample code is given in code pen and below:
<https://codepen.io/ramlals/pen/vwEYbo>

```
<!DOCTYPE html>
<html>

<head>
    <title>Table template</title>
    <style>
       .table-column {
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px;
        }

        .table-panel {
            background-color: rgba(0, 0, 0, .2);
            border: none;
            border-radius: 5px;
            margin-bottom: 15px;
            box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .25);
            color: #fff;
        }
        .table-panel-heading{
            padding: 14px 22px;
            height: 44px;
            border-bottom: 1px solid rgba(0,0,0,.12);
            box-shadow: 0 1px 0 0 rgba(255,255,255,.12);

        }
        .table-panel-title{
            font-weight: 400px;
            opacity: .9;
            text-transform: uppercase;
        }

    </style>
</head>

<body>
    <div class="table-container table-column">
        <div class="table-panel">
            <div class="table-panel-heading">
                <h3 class="table-panel-title">Status</h3>
            </div>
            <div class="table-panel-body">
                <table class="table-tag">
                    <tr>
                        <th>col-1</th>
                        <th>col-2</th>
                        <th>col-3</th>
                        <th>col-4</th>
                    </tr>

                    <tr>
                        <td>chrome1</td>
                        <td>chrome 2</td>
                        <td>chrome 3</td>
                        <td>chrome 4</td>
                    </tr>

                </table>
            </div>
        </div>
    </div>
</body>
</html>

```