Two-Sided FAQ Block for React

Edit TOPICS at the top of the file: each topic has an id, a question, a buyer answer and a seller answer, each one or two sentences. Keep it to about five: each question takes two answers' worth of space, and on a phone they stack. To rename the sides, change the two header cells and the two labels in the rows.

A definition list: each row is a group holding the question as its term and the two answers as its definitions. A table would suggest data to compare; this is two answers to one question. The header band is decorative and hidden from assistive technology; each answer carries its side's name as visually hidden text on wide screens, so "Buyers" and "Sellers" are still read.

The header band and every row share one grid: a 13 rem question column and two equal answer columns from the md breakpoint up. The vertical lines are each answer's own start border, so they run unbroken from the band to the block's end.

Below md the header band hides and every row becomes a stack: the question, then the buyer's answer under a "Buyers" label, then the seller's answer under a "Sellers" label. Rows are separated by hairlines from rail to rail. Nothing scrolls sideways at 320 pixels.

There is no control in this block, so there's nothing to tab to; a screen reader's list-of-definitions navigation, or its headings list ("Buying and selling on Barnwood"), reaches it. It's a server component with no state, so it also prints and reads without scripts.

Yes. The question column, the buyer column and the seller column swap sides, and the dividers are start borders, so they follow. The + marks stay on the rails.