html - 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 won't work doesn't have closing tag. managed in main div .search. border showing want this

actually, can desired result css.
give :after absolute position , negative margin-top equal padding of parent. give height of parent :

.search:after{     content: " ";     border-right: 4px solid red;     margin-left: 20px;     height: 66px;     position: absolute;     margin-top: -20px; } 

the demo jsfiddle