如何在CSS中缩短border-left高度属性

我制作了一个简单的地址面板，其中我制作了三个面板，每个面板由地址，电话号码和电子邮件组成。每个面板都包含一个图标和一个段落。我使用了vertical align：top和display table属性来对齐它们然后我给主div赋予了一个border-left属性，该属性包含了其中所有的div。我想要设计一个这样的行，使其行通过图标且不超过顶部和底部图标但是问题出在这里，主要由所有这些图标组成，并且有一些填充和边距，因此即使我删除了边距和填充，它也会越过并且无法修复它。我想设计一个这样的设计图标不应超过顶部和底部图标。如果有人建议使用position属性，只要记住，我在另一个具有绝对位置的col-md-6内有一个div。

这是HTML部分：-

<div class="row">
                <div class="col-md-6 col-sm-12">
                    <h2 class="heading-title">Drop in our office</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    <div class="address-top">
                        <div class="address-repeat">
                            <div class="address-left">
                                <div class="body-widget">
                                    <i class="fa fa-map-marker" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="address-right">
                                <div class="body-widget">
                                    <label>ADDRESS</label>
                                    <p>Huatai Securities (USA)10 Hudson Yards 41FlNY, NY 10001</p>
                                </div>
                            </div>
                        </div>
                        <div class="address-repeat">
                            <div class="address-left">
                                <div class="body-widget">
                                    <i class="fa fa-phone" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="address-right">
                                <div class="body-widget">
                                    <label>LETS TALK</label>
                                    <p>212-763-8166</p>
                                </div>
                            </div>
                        </div>
                        <div class="address-repeat">
                            <div class="address-left">
                                <div class="body-widget">
                                    <i class="fa fa-envelope" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="address-right">
                                <div class="body-widget">
                                    <label>GENERAL SUPPORT</label>
                                    <p>[email protected]</p>
                                </div>
                            </div>
                        </div>
                    </div>  
                </div>

这是CSS部分：-

.address-left, .address-right{
    vertical-align: top;
    height: 100%;
    display: table-cell;
}
.address-left{
    width:50px;
    box-sizing: border-box;
    padding: 20px 0 0 0;
}
.address-right{
    width: 200px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 25px 0 0 0;
}
.address-repeat{
    width: 100%;
    margin: 20px 0 0 -12px;
}

.address-top{
    width: 100%;
    border-left:2px solid #d5d5d5;
    margin: 20px 0 0 10px;
}

#contact-us .address-right p{
    color:#5e5e5e;
    font-family: 'Montserrat-Regular';
    padding: 0;
    margin: 0;
    letter-spacing: 0.5px;
    font-size:14px;
    width:200px;
    font-weight: lighter;
}
#contact-us label{
    font-family: 'HelveticaNeueLTStd-HvCn';
    font-size:17px;
    color:#343434;
}
#contact-us i{
    color:#ffffff;
    font-size: 15px;
    border-radius:50%;
    width:25px;
    height:25px;
    line-height:23px;
    padding:1px 0 0 6px;
    background-color:#e70020;
}