html - how to add a vertical line to the right to the button such that the line should appear in between the search bar and that button

Question

The line should be beside the button and before the search bar

.vertline{
  border-right:4px solid black;
  height:200px;
}

<div class="vertline">
  <button class="hin"></button>
  <label>Home</label>
  <span><input type="text" placeholder="search videos" name="search"></span>
  <span><input type="submit" value="" class="tel"></span>
</div>

question from:https://stackoverflow.com/questions/65932221/how-to-add-a-vertical-line-to-the-right-to-the-button-such-that-the-line-should

Answer 1

If I understand you correctly, just put the the vertline class to the the span with the input field. Heres an example:

.vertline {
  border-right: 4px solid black;
  padding-right: 5px;
  display: inline-block;
}

<div>
  <button class="hin"></button>
  <label>Home</label>
  <span class="vertline"><input type="text" placeholder="search videos" name="search"></span>
  <span><input type="submit" value="" class="tel"></span>
</div>