2 inputs divided by a slash - html

Question

can someone help me achieve that 2 ínputs look like one divided by a slash
Also doing it with twitter-bootstrap
Idea : http://postimg.org/image/pcgbzj4s1/
What I got so far but there is divided also I think they should overlap(slash with inputs)
<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 Here's the quick codepen I made for you, it shoud do what you need :)
<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

Many ways to it... here's two.
Given this html:
<div class="container">
<input type="text">
<span class="slash"></span>
<input type="text">
</div>
With this 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;
}
A demo here