These are two different blocks- an accordion and a basic text block. First we are going to style them to be side by side.

Add "col". Save. Repeat process with other block as well.

The output is side by side. Columns do not have to be equal width. by adding "col-[[number]] " to each column, you can choose the width of each column.

The numbers should add to 12. Let's do an example. Click the edit icon for the accordion.

Now it is taking up a larger width. The other side should be "col-4", as 8+4=12. 

This means the accordion is twice as wide as the basic block.

For now, we can leave them both on "col-6". 6+6=12, and this will leave them at equal widths. Repeat this process with both blocks.

One missing piece to our style is the breakpoint property. If you view these columns on mobile, they stay side by side even on small screens because we haven't told it *not* to.

Sed tempus vestibulum elementum. Fusce bibendum purus eros, ac bibendum ex auctor quis. Integer non dui non nibh aliquet scelerisque. In fermentum non sem ac tempus. Nulla pretium magna nec ultricies aliquet. Phasellus luctus nulla orci, a tempor tellus ultrices ac. Nulla laoreet imperdiet erat, quis varius lorem finibus vel. Sed a mauris scelerisque quam elementum consequat non finibus nisi. Etiam ligula justo, commodo ac volutpat ac, laoreet nec orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur fringilla nunc, non sollicitudin nisi porttitor semper. Quisque eu volutpat felis. Mauris pulvinar, eros sit amet euismod porta, enim purus aliquet nunc, at rutrum purus eros eu quam. Nulla pharetra eget velit id fermentum.

Add "col-md-6". The breakpoint is the middle property. This means on a mid size breakpoint screen, 800px and below, the columns will break and they will no longer display in column format. The breakpoint property options are [[xs]] [[sm]] [[md]] [[lg]] [[xl]] [[xxl]] .Repeat this property on both blocks.

On desktop, there will be no change as we have made no changes to any breakpoint above [md](medium-800px). We will see this display on mobile later. For now, let's add a background color to our basic block.

Here is our output. But with the color, we can see the text is close to the edges. We can add a style for padding to solve this.

Step-by-step instructions on how to position blocks side by side, adjust their widths, and implement responsive design principles. By following this guide, users can enhance their website's layout and ensure a visually appealing and functional design across different screen sizes using essential tools such as grid systems, color usage, padding, and breakpoints.

DoCS Drupal Style Guide: Example Through Block Classes