CodeSandbox

1. Text controled by media size:

   roles-detials.jsx
   

2. Sandbox Test: configure theme to change breakpoints

3. Sandbox Test: using width

4. Sandbox Test: vertical middle align example

   1. dynamic TextField label

   2. “vertical-align” can only aplied to inline or TableCell. This test solved it by using flex & alignItems. See comments in style.

   3. keep Grid children in row (flex + growdirection = row)