SVG Divider flex container not matching height of input in React

3 hours ago 2

ARTICLE AD BOX

I am building a Hero Section in React app and creating a search bar with a dropdown, input field and a vertical divider between them.
The search box is a flex container. I want the vertical divider(SVG line) to have the same height as the input field as the input field and the dropdown as shown in the screenshot. enter image description here

However the SVG divider does not stretch to the full height of the container.
This is what I am getting:

enter image description here

React Component Code:

import "./Hero.css"; import bgImage from "../../assets/images/bg-image.png"; // FindTheRightCourse (Hero Section) export default function FindTheRightCourse(){ return ( <section className="find-course-section" style= {{ backgroundImage:`url(${bgImage})`}} > <div className= "find-course-overlay"> <h1 className="find-course-title">FIND THE RIGHT COURSE</h1> <div className="find-course-search-box"> <div className= "find-course-select-wrapper"> <select className="find-course-select"> <option>Courses </option> <option>Engineering</option> <option>Accountant</option> <option>Science</option> <option>Management</option> </select> <span className = "find-course-select-arrow"><svg width="11" height="7" viewBox="0 0 11 7" fill="#464646" xmlns="http://www.w3.org/2000/svg"> <path d="M4.77277 5.82317L0.216514 1.26678C-0.0734701 0.976921 -0.0734701 0.506996 0.216514 0.2173C0.506238 -0.0724335 0.976142 -0.0724335 1.26584 0.2173L5.29744 4.249L9.3289 0.2174C9.61874 -0.072319 10.0886 -0.072319 10.3783 0.2174C10.6682 0.507133 10.6682 0.977043 10.3783 1.26688L5.82199 5.82328C5.67706 5.96815 5.48731 6.04049 5.29746 6.04049C5.10753 6.04049 4.91764 5.96802 4.77277 5.82317Z" fill="#464646"/> </svg></span> </div> <svg className="find-course-divider" viewBox="0 0 1 49" fill="black" xmlns="http://www.w3.org/2000/svg"> <line x1="0.5" x2="0.5" y2="49" stroke="#CECECE"/> </svg> <input type="text" className="find-course-input" placeholder="e.g. Engineering, Accountant. etc."/> <button className = "find-course-button">SEARCH</button> </div> </div> </section> ); }

CSS Code:

/* CSS For Hero Section (Find the Right Course) */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap'); .find-course-section{ width:100%; height:500px; background-size:cover; background-position:center; background-repeat:no-repeat; display:flex; justify-content: center; align-items: center; position:relative; } .find-course-overlay{ width:100%; max-width:1200px; padding:0 20px; display:flex; flex-direction: column; align-items:center; } .find-course-title{ color:#fff; font-size:3rem; font-weight:500; letter-spacing:1px; margin-bottom: 30px; text-align: center; font-family: "Source Sans Pro",sans-serif; } .find-course-search-box{ width:540px; height:50px; background-color:#ffffff; border:4px solid #ffffff; border-radius:6px; overflow:hidden; display:flex; align-items:stretch; box-sizing: border-box; } .find-course-select-wrapper{ position:relative; height:100%; display:flex; align-items:center; } .find-course-select{ width:140px; border:none; outline:none; font-size:14px; font-family:"Source Sans Pro", sans-serif; padding:0 18px; /* border-right:1px solid #d9d9d9; */ appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; } .find-course-select-arrow{ position:absolute; right:45px; top:50%; transform:translateY(-50%); color:#464646; font-size:16px; pointer-events: none; } .find-course-input{ flex:1; border:none; } .find-course-divider{ height:auto; width:1px; align-self:stretch; }

How can I make the SVG divider automatically stretch to the full height of the flex container so it matches the input field height?