2 входов, разделенных косой чертой

Question

может кто-то помочь мне добиться того, что 2 INPUTs выглядеть, как разделенного косой чертой также делает его твиттер-самозагрузки

Идея: http://postimg.org/image/pcgbzj4s1/

То, что я получил до сих пор, но там делится также я думаю, что они должны перекрываться (слэш входами)

<input class="form-control" type="text" name="kerkim" id="input_main"> 
<i id="slash">/</i> 
<div class="input-group">       
<input id="address" class="form-control" type="text" > 
<div class="input-group-btn"> 
<button type="submit" class="btn btn-ẃarning"><i class="glyphicon glyphicon-search"></i></button> 
</div> 
</div> 

Answer 1

http://codepen.io/oroborus357/pen/doVKEP Вот быстрый codepen я сделал для вас, это Шоуда делать то, что вам нужно :)

<span class="first"><input type="text" /></span><input class="second" type="text" /> 

body { 
    padding: 50px; 
    background: #333; 
} 
* { 
    box-sizing: border-box; 
} 
input { 
    background: white; 
    border: none; 
    padding-left: 15px; 
} 

.first { 
    position: relative; 
} 
.first:before { 
    content: "/"; 
    position: absolute; 
    left: 100%; 
    top: 0; 
    height: 100%; 
    transform: translateX(-50%); 
    font-size: 18px; 
} 

Answer 2

Много способов для этого ... вот два.

Учитывая этот HTML:

<div class="container"> 
     <input type="text"> 
     <span class="slash"></span> 
     <input type="text"> 
    </div> 

С помощью этого CSS:

.container{ 
    border: 1px solid #999; 
    display: inline-block; 
    border-radius: 3px; 
    background: #fff; 
    margin-top: 50px; 
    position: relative; 
} 

.container input{ 
    border: none; 
    background: none; 
} 

.slash{ 
    transform: scale(3); 
    position: absolute; 
} 
/* or.... */ 
.slash{ 
    width: 2px; 
    height: 28px; 
    background: #999; 
    transform: rotate(20deg); 
    position: relative; 
    display: inline-block; 
    position: absolute; 
    top: -5px; 
} 

Демонстрационный here