(How) can I conditionally center a div (horizontally) based on the size of its previous sibling

Issue

I have a grid with two columns. The first is a sidebar that the user can hide/show and the second is the main content. Here's what that looks like...

sidebar shown

sidebar hidden

I would like to use CSS (tailwind, specifically) to horizontally center the main content iff the sidebar is hidden.

Code

<div className="w-full grid grid-cols-[auto_1fr]">
  <MySidebarComponent />
  <MyMainComponent />
</div>

Question

Is this possible / how can I make this work? I thought that tailwind's new has variant might help, but I couldn't get it to work.

Note

My sidebar has a property that changes based on its open/closed state. Note that this is based on Headless UI's Disclosure component.

open state

<div data-headlessui-state="open">
  <div>Other contents here...</div>
</div>

closed state

<div data-headlessui-state></div>  // No contents

Playground

A place to tinker

Solution

You can use tailwinds peer modifier, which also has support to style based on data attribute.

<div className="w-full grid grid-cols-[auto_1fr]">
    <div className="border border-blue-500 peer" data-headlessui-state="open">Sidebar</div>
    <div className="border border-red-500 peer-data-[headlessui-state='open']:text-left text-center">Main content</div>
</div>

Here is a working example

Answered By - Rico