Html Select Dropdown Custom Arrow Css

I am trying to use a custom arrow for a dropdown menu as mentioned in the code. I am facing two issues here. 1.unable to place the arrow section adjacent to the dropdwon. 2.This c

Solution 1:

Position And Click !

Changes commented :

Snippet :

.expenses_div {

width:90%!important;
margin:auto;
margin-top:2%;

}


.expenses_div_left{
height:40px;
line-height:40px;
background-color:black; 
float:left;
display: inline-block;
text-align:left;
padding-left:12px;
color:white;
width:48%;
font-size: 14px!important;
font-family : "Montserrat",sans-serif !important;

} 

.expenses_div_right{

height: 40px!important;
line-height: 40px!important;
width:48%;
float:left;
display: inline-block;
cursor:pointer;
background:transparent !important;
position:relative;/*Added (Because :after should be relative to this not whole page! )*/

}




.expenses_div_right select {

font-family : "Montserrat",sans-serif !important;
background:transparent !important;
appearance:none !important;
-moz-appearance:none !important;
-webkit-appearance:none !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
border: 1px solid black !important;
width:100%!important;
color:black !important;
height:40px;
text-align:left !important;
font-size: 14px!important;
outline: none; 
background-color:none !important;
position: relative !important;
cursor:pointer;
padding-left:12px;

}


.expenses_div_right:after { 
content: '< >';
font: 16px"Consolas", monospace;
font-weight:bold;
color: white;
background-color:black;
display:inline-block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;/*Changed to absolute*/top:0;/*Added*/right:0;/*Added*/width:40px;
height:40px;
text-align:center;
line-height:40px;
overflow:hidden !important;
cursor:pointer;
z-index :-1 ;/*Added ( For Your 2nd Question )*/
}

<divclass="expenses_div"><divclass="expenses_div_left" >How to Proceed</div><divclass="expenses_div_right" ><selectname="main_selection"id="main_selection" ><optionselectedvalue="">Select an option</option><optionvalue="new_data">New Data</option><optionvalue="analize_data">Analyze Data</option><optionvalue="refresh_data">Refresh Data</option></select></div></div>

I hole this helps you !