cannot align text next to image with proper intent

Question

Hello i am trying to make an footer it have an image so i am not able to properly intent my webpage please help... I want to achieve something like this::

CodePen link :https://codepen.io/Sherrinford03/pen/yGKaQb

What i want

how far i have come

<div class="footer">
        <div class="part">
            <div class="body_of_part">
            <img src="images/brochure.jpg" align="bottom">
            </div>
        </div>
        <div class="part">
            <div class="body_of_part">
            <span class="Title_of_departments">ADDRESS</span>
            <span class="Body_of_cap">SOMEADD</span>
            </div>
        </div>
        <div class="part">
            <div class="body_of_part">
            <span class="Title_of_departments">Contact us</span>
            <span class="Body_of_cap">
                Email<br>
                SOMEMAIL
                </span>
            </div>
        </div>
    </div>

...CSS

.footer{
    display: table;
    text-align: center;
    margin:20vh 0vw 0 0 ;
    padding:0 0 0 0;
    background: #222222;
}
.part img{
    vertical-align: middle;
  display: table-cell;
    width: 20vw;
}
.footer .part{ 
    height: 40vh;
    border-left: 1px solid #353535;
    display: inline-block;
    width:20vw;
}
.part .Body_of_cap{
    font-size: 18px;
}

Can u please help me ! i have been looking for a solution for about 2 hours ... PLease help!

Answer 1

remove

inline-block 

from

.footer .part{

and it should work