Is there a way to make sure my highlight bar above my header always stays aligned with the start of the first word. It works when the header has text aligned left, but in this case the design needs to have the text aligned center. When the screen shrinks the text shifts and the bar stays where it is it should follow the text always.

Is there a way to make sure my highlight bar above my header always stays aligned with the start of the first word. It works when the header has text aligned left, but in this case the design needs to have the text aligned center. When the screen shrinks the text shifts and the bar stays where it is it should follow the text always.

I have a flex container in which I want to have another flex container which scrolls content when it is too large to fit the screen. This is what I have so far:

I have two OutlinedInput in the UI, when i click on any of them, both are getting focused. I tried using normal HTML input tag to check, normal input elements are working fine. I have attached the UI screenshot and the code. First snippet is of my component file and second one is of CSS file.