Aligning multiple images in div

Question

<div class="title" >
    <div class="issues"> <h2>Issues</h2></div>
        <div class="dropdown"> 
            <span class="filter"><h3>Filter</h3></span> 
            <span class="project"><h3>Project</h3></span>  
            <img src="down-arrow.png" style="height: 13px;">
            <img src="Grid.svg" style="margin-left: 13px;">
            <img src="List deactivated.svg" style="height: 13px;">
        </div>

I want the last two image with height 15px to align with all the elements of div.When I try doing so,all other elements move out of div and it gets distorted.Given below is my css code.

 .title{
    margin-left: 192.5px;
    background: transparent;
    padding: 10px 0;
}
h3{
  display: inline;
}
.dropdown{
  margin-left: 76%;
  margin-top: -50px;
}

Answer 1

You can try to use Flexbox . For example:

 .dropdown { display: flex; align-items: center; justify-content: center; }