The CSS columns specification emphasizes the importance of maintaining balanced content between columns, ensuring they have equal height.
According to the Mozilla developer network,
The CSS3 Column specification mandates that column heights should be balanced, with the browser automatically adjusting the maximum column height to achieve approximately equal content heights in each column.
While this balancing behavior may initially seem restrictive in terms of arbitrary column breaks, there is a column-fill property that can potentially alter this behavior. However, support for this feature is currently limited to Firefox and may not fully address your specific issue.
One potential workaround could involve setting the height or max-height of the container containing the columns using a proportional unit like EM. By constraining the column heights just beyond where the language element is rendered, it might create the illusion of a single arbitrary column break.
In the absence of widespread column-fill support, achieving an ideal layout may require a balance of content distribution before and after the desired element, or proportionate division based on the column count. Alternatively, utilizing the break-after property as specified in the document could provide a solution, although its compatibility remains limited at present.
To maximize compatibility, combining break-after with the -webkit-column-break-after property, along with setting column-fill to auto and adjusting the height to limit the parent container's size below the language element, could help better cover various scenarios (particularly for Firefox).
It's important to acknowledge that CSS columns themselves do not enjoy universal support, with notable lack of support from Internet Explorer 9. Therefore, accepting some limitations in achieving arbitrary column breaks across all browsers may be necessary.