CSS Input group border right height issue


I am trying to design a searchbar with multiple inputs, each input is seperated by a border on the right. I have tried looking for css property that defined the height of the border but i cant seem to find anything that works.

And this is what i am trying to achieve :

This is what i have :

My form looks like this :

<form onSubmit={handleSubmit} role="search" className="form-rounded">
              <div class="input-group">
                <input type="text" class="form-control no-border edgeinp" placeholder='Diagnosis' onChange={handleChange} id='diagnosis' name='diagnosis' />
                <input type="text" class="form-control no-border" placeholder='Destination' onChange={handleChange} id='destination' name='destination' />
                <input type="text" class="form-control no-border" placeholder='Min. Cost (Dollars)' onChange={handleChange} id='mincost' name='mincost' />
                <input type="text" class="form-control no-border edgeinp" placeholder='Max. Cost (Dollars)' onChange={handleChange} id='maxcost' name='maxcost' />
                <div class="input-group-append">
                  <button className="btn btn-search" type="submit"><i className="fa fa-search fa-fw btn-success"></i></button>

The css looks like this :

#destinations i.fa {
  font-size: 50px;
  border-radius: 50%;
#destinations .no-border {
  border: 0;
  box-shadow: none;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
Any advise, links to read or recommendations will be appreciated.

A border surrounds an element, the dimensions are the element.

Looking at the image it’s hard to tell, but it is possible that the height of the border is the input height and the text above it isn’t part of the input. So you have a container for each input with text above the input. Your placeholder text is the text in gray and not the text above the input.

Here is an example, I know it doesn’t look exactly the same but you get the point. I’m not sure what the plan for the responsiveness is, so I just didn’t bother.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.