Outline parent element based on child focus state

Question

I'm building a quiz app for Spanish numbers, and the input consists of two sections — a user input, and a random noun. Here's how I want the focus state to look (the entire box should have a yellow outline on focus).

When implementing this in HTML, I placed both elements inside of an input-container with a gray background. Currently, the focus state is only applied to the input which leads to the following result (i.e. only the input section is outlined).

Does anybody know how I could replicate this design in my implementation (i.e. have the entire input-container be outlined whenever a user focuses on the input)? From some preliminary searches, it seems impossible (in CSS) to highlight a parent element based on a child focus state. So any recommendations for ways in which I could restructure my code?

Here's my html and css:

form(action="/answer" method="post" autocomplete="off") 
          .input-container
            input(type="text" name="answer" placeholder="Enter number in spanish")
            p.noun=noun
          input(type="submit" value="answer")

.input-container {
  display: flex;
  align-items: center;
  background-color: #F3F3F3;
  height: 44px;
  width: 380px;
  margin: 0 0 16px 0;
}

input:focus {
  outline: none;
  border: 2px solid #FFDAA2
}