0

This is a rather trivial question, but I cannot figure it out. I have tried to use the property inline-block, as well as floating the elements but the two inputs will not go side by side. Here is a jsfiddle.

input {
    width: 100%;
    height: 40px;
    font-size: 2em;
}

input[type=text]:focus {
outline: none;
}

.bookmarkInputs {
    width: 250px;
    margin: 0 auto;
    padding-top: 100px;     
}

.test {
    display: inline-block;
}
<div id='container'>
    <div class='bookmarkInputs'>
        <input id='addNameInput' class='test' type='text'>
        <input id='addURLinput' class='test' type='text'>
    </div>
</div>
NoobTW
  • 2,466
  • 2
  • 24
  • 42
nasdfjanjk
  • 3
  • 1

3 Answers3

0

You need to set the input tag's width at 50% or less

Nico Real
  • 129
  • 1
  • 8
0

Your input is 100% width, so both your input will try to fit the .bookmarkInputs. Just make its width smaller.

input {
    /*width: 100%;*/
    width: 48%;
    height: 40px;
    font-size: 2em;
}

input[type=text]:focus {
    outline: none;
}

.bookmarkInputs {
    width: 250px
    margin: 0 auto;
    padding-top: 100px;     
}

.test {
    display: inline-block;
}
<div id='container'>
    <div class='bookmarkInputs'>
        <input id='addNameInput' class='test' type='text'>
        <input id='addURLinput' class='test' type='text'>
    </div>
</div>
NoobTW
  • 2,466
  • 2
  • 24
  • 42
-1

Your input has 100%, you must modify it and place it like this

input {
 /*width: 100%;*/
  width: 48%;
  height: 40px;
  font-size: 2em;

}

Edgardofbg
  • 1