Label and Description outside of parent

[mainej]

I'd like to be able to put a RadioGroup.Description outside of its corresponding RadioGroup.Option, but still have the two linked by aria-describedby. My use case is that I have several options, each with a label and a description.

I'd like to have a row of options, with each label above its description. But... and here's the problem... I want all the labels to have the same height and all the descriptions to have the same height. However, some labels are short while others are long and will wrap. Similarly for descriptions—some will wrap and others won't. I can't use fixed heights, because the text comes from a database, and I don't know of a way to solve this with .flex.

The obvious way to do what I want is with a .grid. But, to put them in a grid, the Option and Description would have to be siblings, not parent/child.

To make this a little more concrete, I'd like to be able to do something like this:

import { useState } from "react";
import { RadioGroup } from "@headlessui/react";

function MyRadioGroup() {
    let [picked, setPicked] = useState("x");

    return (
        <RadioGroup className="grid grid-cols-2 gap-4" value={picked} onChange={setPicked}>
            <RadioGroup.Option value="x">A long label for X, which will wrap</RadioGroup.Option>
            <RadioGroup.Option value="y">Short Y label</RadioGroup.Option>
            <RadioGroup.Description for="x">Short X description</RadioGroup.Description>
            <RadioGroup.Description for="y">A long description for Y, which will wrap</RadioGroup.Description>
        </RadioGroup>
    );
}

I think that I could also make the parent/child relationship work with CSS subgrid, but support for that looks a long way off.

(Also, you all are building a great tool, and I appreciate your work!)