title: How to change the color of label when input next to it is focused?
body: <p>I have a div with a label and an input-field within a form.</p>
  
  <p>When the input-filed is focused I want the border of the div to change color (I managed to do that) but I also want the color of the label to change.<br>
  Since the label is not the input's parent I'm not sure how to do this.</p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;div class="floating-fake"&gt;
    &lt;label class="label-ff col-form-label-sm"&gt;Ansprechpartner&lt;/label&gt;
    &lt;input type="text" class="input-ff form-control-sm" name="ansprechpartner" value="{{ old('ansprechpartner') }}"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here's the css:</p>
  
  <pre><code>.input-ff {
     width: 97%;
     margin-left: 3%;
     border: none;
     letter-spacing: 0.5px;
  }
  .input-ff:focus {
    outline: none;
    border: teal;
    background: #fff;
  }
  .floating-fake:focus-within {
    border-color: #22c7dd;
  }
  </code></pre>
  
  <p>The label should change to <code>color: #22c7dd;</code>.<br>
  I have searched for this but only came across javascript solutions(which I'm trying to avoid) or other ones with the <code>+</code> selector that won't help me in this case.</p>
  
  <p>I hope someone can help me with this since I'm not much experienced when it comes to html/css.</p>