Purpose

There is another article on the same subject but the described method uses the “Happy Addon for Elementor”. In this article, the method uses CSS only without using any addons or plugins. This has the advantages that no future update burden and the site is less heavy.

The method here is to add an inner section to the left column to house the elements of the left column. Set the width of the inner section to the required content width. Then calculate the column width of the outer column such that when the inner section is pushed to the end (justify-item: flex-end), the inner section can align with the left side of the grid. The calculation is simplified when the left and right column have equal width as described below.

Approach

• Configure the section to have this structure:
  • section ( fullwidth, no gap, overflow hidden )
    • left column C1 ( width: blank (or 50%), horizontal-align: End, css-id: cu-sandbox-r01c1 )
      • inner section ( content-width: boxed )
        • inner column ( width: 100% )
          • various elements
    • right column C2 ( width: blank (or 50%), horizontal-align: default, css-id: cu-sandbox-r01c2 )
      • various elements

1. Assume the followings:
   • ELW = widest element in C1
   • IPL = inner section column padding left (default = 10px)
   • IPR = inner section column padding right (default = 10px)
   • SPR = section column padding right (default = 10px)
   • RCW = required content width = IPL + ELW + IPR + SPR
   • GRD = grid size of the page
   • LEN = the length between screen edge and the grid
2. If C1 and C2 have equal width, then set their width to 50% in Elementor. Skip the calculation in Steps 3 to 5.
3. It is obvious that 100vw = GRD + 2LEN, hence LEN = 50vw – GRD/2
4. Therefore, to have the elements in C1 in grid, the width of C1 = LEN + RCW
   • C1 = 50vw – GRD/2 + IPL + ELW + IPR + SPR
   • C2 = 100vw – C1
5. Set the width of left and right columns to C1 and C2 respectively in style.css or custom CSS.
6. Set inner section width (note: not column) to (RCW-SPR) in style.css or custom CSS.

Sample CSS

/** Left col in grid and right col fullwidth  **/
#cu-sandbox-r01c1 {
	width: calc(50vw + 128px);
}

#cu-sandbox-r01c2 {
	width: calc(50vw - 128px);
}

#cu-sandbox-r01c1 .elementor-inner-section {
	max-width: 718px;
}