{"version":"1.0","type":"rich","title":"div alignment","description":"This example demonstrates how CSS Flexbox aligns nested divs along a shared baseline. A black background container holds two groups—a yellow left section with red, green, and cyan boxes, and a red right block—all arranged using `display: flex`, `flex-direction: row`, and `align-items: baseline`. The left group uses `justify-content: flex-start` and `align-content: flex-start` to pack the child divs tightly. Different heights and line-height values show how baseline alignment affects vertical positioning of text and block elements.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/58864a7f117f4a8da5d25b86a37efa15?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}