show and hide outer div when input is focus and not focus with css

I want to control a div to hide and show only with css when the input is focused or not. But the problem is that the input I have is very deep in some element. How do I make the div show when the input is focused and the div hide when the input is not focused?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.v-text-field input:focus-within > .class-target {
   display: block;
}

.class-target{
   display: none;
}

<!-- language: lang-html -->

<div class="v-input custom-search input-small v-text-field">
  <div class="v-input__control">
    <div class="v-input__slot">
      <div class="v-text-field__slot">
        <input id="input-17" type="text" value="">
      </div>
    </div>
    <div class="v-text-field__details">
      <div class="v-messages theme--light">
        <div class="v-messages__wrapper" />
      </div>
    </div>
  </div>
</div>

<div class="class-target">Target</div>

<!-- end snippet -->

I think you misunderstood the focus-within class
> :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused

Just remove the class from input. MDN DOC HERE
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.v-text-field:focus-within + .class-target {
   display: block;
}

.class-target{
   display: none;
   width:100px;
   height:100px;
   border:1px solid;
}

<!-- language: lang-html -->

<div class="v-input custom-search input-small v-text-field">
  <div class="v-input__control">
    <div class="v-input__slot">
      <div class="v-text-field__slot">
        <input id="input-17" type="text" value="">
      </div>
    </div>
    <div class="v-text-field__details">
      <div class="v-messages theme--light">
        <div class="v-messages__wrapper">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="class-target">Target</div>

<!-- end snippet -->