To arrange elements on the page, you can use moonshine::grid
and moonshine::column components.
The grid consists of 12 columns.
<x-moonshine::grid> <x-moonshine::column adaptiveColSpan="6" colSpan="6"> {{ fake()->text() }} </x-moonshine::column> <x-moonshine::column adaptiveColSpan="6" colSpan="6"> {{ fake()->text() }} </x-moonshine::column></x-moonshine::grid>
Sit dolorem magnam accusamus minima pariatur fuga at a. Vel omnis modi placeat id dolore ea rem. Cumque qui sapiente amet autem.
Dolorem rem voluptatum ipsa sequi aperiam. Omnis corporis ut aut corporis beatae ea. Perspiciatis odit ut eum alias earum iste aut.
adaptiveColSpan - the number of columns that the block occupies for screen sizes up to 1280px.
colSpan - the number of columns that the block occupies for screen sizes of 1280px or more.