Using css, keep button visibility hidden until sibling input expanded or contains text

Got a search component in ReactJS I'm working on. Here's an example https://codepen.io/illusionfactory/pen/ZERwyxv

When the input field has focus, it expands and so does its parent container. The input has a sibling button.

With css (without JS), is it possible to only show the button when a) the input field is expanded, or b) input field has text? Otherwise the button is hidden?

Wondering if it can be done using css, without JS. I was attempting :focus-within on the container and :last-c开发者_如何学运维hild but didn't have much luck.