How do I change the width of the hr Element, if the input is focused but in an other span?

I am using Telerik to generate a textbox. Now I would like to equip this with an animation.

The problem is that Telerik wraps a span around the input, so I don't know how to change the hr element when the input is focused.

My Code:

span.inputanimation {
    width: 100%;
}

// Here is what i dont know how to do !
span.inputanimation > .input > input:focus hr.underline {
    width: 100%;
}

hr.underline {
    width: 0%;
    transition: width 0.5s ease-in-out;
    background-color: #17e13f;
    height: 2px;
    border: none;
    margin-top: 2px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="styles.css" rel="stylesheet" type="text/css"></style>
</head>
<body>

<!-- Generated with TelerikTextBox -->
<span class="inputanimation">
  <span class="input">
    <input id="Vorname">
</span>
<hr class="underline">
</span>

</body>
</html>

I removed some of the CSS classes and HTML Properties so it is better to look at.

My Telerik Code:

<span class="inputanimation">
        <TelerikTextBox @bind-Value="Value"
                        Id="@Id"
                        PlaceHolder="@Label"
                        Class="input">
        </TelerikTextBox>
        <hr class="underline" >

    </span>

Solution

Looking at various posts on hover and focus, it seems that the two elements have to be related, such as child or sibling. Which would be easy if you weren't using Telerik.

One solution is to use javascript. I am using ids to show the concept.

let search = document.getElementById('Vorname');
let ruler = document.getElementById('Ruler');

search.onfocus = function(){ ruler.style.width = '100%'; }

span.inputanimation {
    width: 100%;
}


hr.underline {
    width: 0%;
    transition: width 0.5s ease-in-out;
    background-color: #17e13f;
    height: 2px;
    border: none;
    margin-top: 2px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="styles.css" rel="stylesheet" type="text/css"></style>
</head>
<body>

<!-- Generated with TelerikTextBox -->
<span class="inputanimation">
  <span class="input">
    <input id="Vorname">
</span>
<hr id="Ruler" class="underline">
</span>

</body>
</html>

Another solution is to use focus-within

span.inputanimation {
    width: 100%;
}

span.inputanimation:focus-within hr.underline {
    width: 100%;;
}

hr.underline {
    width: 10%;
    transition: width 0.5s ease-in-out;
    background-color: #17e13f;
    height: 2px;
    border: none;
  margin-top: 2px;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="styles.css" rel="stylesheet" type="text/css"></style>
</head>
<body>

<!-- Generated with TelerikTextBox -->
<span class="inputanimation">
  <span class="input">
    <input id="Vorname">
 </span>
   <hr id='Ruler' class="underline">
</span>

</body>
</html>