no line break between input text and <a>-CodePudding

Within a form I have an text input and a <a> representing a button to add one more input element.

<div >                          
    <input  type="text" placeholder="Menge" name="txt_menge[]" value="3">
    <a href="javascript:void(0);"  title="Add"><img src="../img/add-icon.png"/></a>
</div>

Currently each element has its own line, but they should be together in one line:

How can I achieve this?

Bootstrap classes are used.

CodePudding user response：

add following code in css:

.col-4{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:300px;
  height:auto;
  border:1px solid #000;
  border-radius:5px;
}

.col-4 input{
  width:250px;
  height:100%;
  font-size:1rem;
  border:none;
  padding:1rem 0.4rem;
  outline:none;
}

.col-4 a{
  height:fit-content;
  }

.col-4 a img{
  width:40px;
  height:40px
}

<div >                          
    <input  type="text" placeholder="Menge" name="txt_menge[]" value="3">
    <a href="javascript:void(0);"  title="Add"><img src="../img/add-icon.png"/></a>
</div>

CodePudding user response：

Please try using d-flex instead of col-4

As in: <div >

Another approach would be using row and column of bootstrap, as in

<div >
 <div >
Input here..
</div>
 <div >
Button here..
</div>
</div>

refs: