Columns are powered by CSS Flex and Grid layouts. You can create responsive columns using below shortcodes.
Demo
https://demo2.drupar.com/xarapro/elements/basic-elements/column
Two Equal Width Columns
<div class="items">
<div>First column content..</div>
<div>Second column content..</div>
</div>Three Equal Width Columns
<div class="items">
<div>First column content..</div>
<div>Second column content..</div>
<div>Third column content..</div>
</div>Four Equal Width Columns
<div class="items">
<div>First column content..</div>
<div>Second column content..</div>
<div>Third column content..</div>
<div>Fourth column content..</div>
</div>Columns Of Un-Equal Widths
All un-equal widths columns will transform to full width columns in mobile devices.
w10 will set width to 10%
w20 will set width to 20%
w30 will set width to 30%
w40 will set width to 40%
w50 will set width to 50%
w60 will set width to 60%
w70 will set width to 70%
w80 will set width to 80%
w90 will set width to 90%
Two Columns - 30% and 70%
<div class="columns">
<div class="w30">your content here...</div>
<div class="w70">your content here...</div>
</div>Two Columns with gap - 30% and 70%
<div class="columns gap">
<div class="w30">your content here...</div>
<div class="w70">your content here...</div>
</div>Two Columns - 60% and 40%
<div class="columns">
<div class="w60">your content here...</div>
<div class="w40">your content here...</div>
</div>Two Columns with gap - 60% and 40%
<div class="columns gap">
<div class="w60">your content here...</div>
<div class="w40">your content here...</div>
</div>Two Columns - 80% and 20%
<div class="columns">
<div class="w80">your content here...</div>
<div class="w20">your content here...</div>
</div>Two Columns with gap - 80% and 20%
<div class="columns gap">
<div class="w80">your content here...</div>
<div class="w20">your content here...</div>
</div>Three Columns - 30%, 30%, 40%
<div class="columns">
<div class="w30">your content here...</div>
<div class="w30">your content here...</div>
<div class="w40">your content here...</div>
</div>Three Columns with gap - 30%, 30%, 40%
<div class="columns gap">
<div class="w30">your content here...</div>
<div class="w30">your content here...</div>
<div class="w40">your content here...</div>
</div>Three Columns - 50%, 30%, 20%
<div class="columns">
<div class="w50">your content here...</div>
<div class="w30">your content here...</div>
<div class="w20">your content here...</div>
</div>Three Columns with gap - 50%, 30%, 20%
<div class="columns gap">
<div class="w50">your content here...</div>
<div class="w30">your content here...</div>
<div class="w20">your content here...</div>
</div>