How would I replicate this input text effect where they're almost a merged box in CSS/HTML? -

How would I replicate this input text effect where they're almost a merged box in CSS/HTML? -

saw image on dribbble. how create effect in css? i'm referring 2 input fields beingness merged , having not-full-width divider between them.

something this:

#inputwrap { border: 1px solid #aaa; background: #fff; width: 180px; padding: 10px; margin: 20px; } #inputwrap input { border: none; width: 160px; padding: 5px 10px; outline: none; } #inputwrap input:first-child { border-bottom: 1px solid #aaa; }

http://jsfiddle.net/2thfg/

html css