Выставить div в линию?

*{ 
    margin: 0px; 
    padding: 0px; 
    text-decoration: none; 
} 
.menu div { 
width: 120px; 
display: inline-block; 
vertical-align: middle; 
background-color: #863232; 
white-space: pre-wrap; 
text-align: center; 
height: 50px; 
} 
 
.menu { 
background-color: #323232; 
height: auto; 
left: 20px; 
margin-top: 20px; 
height: 50px; 
} 
.menu div a { 
text-align: center; 
font-size: 20px; 
color: #000; 
    display: block; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

<div class="menu"> 
    <div title="TEST 1"><a href="">TEST 1</a></div> 
    <div title='TEST TEST TEST 2'><a href="">TEST TEST TEST 2</a></div> 
    <div title='TEST TEST TEST 2'><a href="">TEST TEST TEST 2</a></div> 
    <div title="TEST 1"><a href="">TEST 1</a></div> 
 
</div>