border between search text and search button in a search box

border between search text and search button in a search box

demo
html
<div class="search">
<input type="text" value="search..." />
<input type="image" value="Q" />
</div>
css
.search{
width: 400px;
background-color: gray;
border-radius: 12px;
padding: 20px;
}
.search input:first-child{
width: 300px;
}
.search input:nth-child(2){
width: 50px;
height: 20px;
overflow: hidden;
background-color: #fff;
float: right;
text-align: center;
}
.search:after{
content: " ";
border-right: 4px solid red;
margin-left: 20px;
}
I couldn't insert :after elements in input tag because it won't work as
this doesn't have closing tag. So I managed this in main div that is
.search. The border is showing exactly but I want like this