Div 中的内联内容

Question

我将一个PSD文件，现在我有两个卡，我想将卡内的内容要像这样。任何人都可以帮助我吗？

这是我当前的代码：

.container {

   margin-top: 10px;

}

.card {

   display: flex; 

   justify-content: center;

   align-items: center

}

<div class="container">

    <div class="col-lg-12">

        <div class="row">

            <div class="col-md-6">

                <div class="card height-2">

                    <i class="material-icons">gavel</i>

                    <h5>Legislacion</h5>

                </div>

            </div>

            <div class="col-md-6">

                <div class="card height-2">

                    <i class="material-icons">today</i>

                    <h5>Calendar</h5>

                </div>

            </div>

        </div>

    </div>

</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">