Select Pair Comparison Blog Block for React

Edit POSTS at the top of the file: an id, a title, an author, a display for the cover, a level, minutes, two topics, a takeaway and an updated date as an ISO string. The two Selects, the rows and the summary all read that one list; change ROWS to compare other fields.

The block compares the two posts' text row by row. The line says how many rows differ and lists the ones that match ("Differ on 4 of 5 rows. Same: level."), or "Nothing the same." It is recomputed on every choice and spoken by a polite status region.

They are the catalog's Select with five items, always one chosen, each labelled "First post" and "Second post". Choosing the post the other column shows swaps the two, so the pair never repeats. It takes the item values directly.

Each cell is drawn five times in one grid cell, once per post, and only the chosen one is visible; the other four are unseen, hidden from assistive technology and the keyboard. The cell is as big as the biggest of them, so a long takeaway never pushes the page, and the rows of the two columns always line up.

The two columns stack, each with its own Select, cover, title and rows, and every row keeps its label ("Length", "Level"). The summary band sits under both. Nothing scrolls sideways at 320 pixels.

Yes. The columns and their divider mirror, and the labels sit at the start of each row. Dates and minutes are isolated with bdi, and the covers are artwork and keep their own direction.