How to apply styles to label while input:focus is true

<div class="input-container">
    <label>Input Label</label>
    <input />
</div>

This is the html, I want to resize and reposition the label test when the input focus is active

my css looks something like this

.input-container > input:focus .input-container > label {
    color: green;

}

For this example, is there a way to change the label text color to green when the input is focussed? Thank you, I know this is easy with JS, I am looking for an all css solution though

>Solution :

As per the comments:

"A CSS rule can only affect sibling elements after the current element. So you would need the input to be before the label in the markup to be able to do this"

So you will have to put the input first. Then you can use flex with row-reverse on .input-container to re-adjust the order. Then just use the sibling selector ~ to style the label when input:focus.

.input-container {
  display: flex;
  flex-flow: row-reverse;
  justify-content: start;
}

input {
  margin-left: .5em;
}

.input-container > input:focus ~ label {
    color: green;
}

<div class="input-container">
  <input>
  <label>Input Label</label>
</div>