---
layout: post
title: Fill available space on focus with CSS flexbox and transitions
teaser: A flexible way to expand and collapse a simple input element using the :focus-within pseudo selector.
tags:
    [
        'Code Snippets'
    ]
---

It’s all pretty much in the title on this one. A common interaction for search inputs in user interfaces is to expand the width of the input when the user has placed their focus into it. This example is a dead-simple and flexible way to achieve that effect using only CSS flexbox, transitions, and the `:focus-wthin` pseudo selector.

{% codepen 'YzNwjXX' %}