Which CSS property is essential for establishing a two-column layout with equal widths, side-by-side?

To establish a two-column layout with equal widths, side-by-side, you can use the CSS Flexbox or CSS Grid layout. Here's a step-by-step guide using Flexbox:

1. First, create a container div that will hold the two columns. This will be the flex container.

<div class="container">
</div>

2. Inside the container, create two divs. These will be the flex items, or the columns.

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
</div>

3. Now, in your CSS, set the container to display as flex. This will make the child divs sit side by side.

.container {
  display: flex;
}

4. To make the columns have equal widths, set the flex property of the columns to 1. This means that they will take up an equal amount of space within the container.

.column {
  flex: 1;
}

And that's it! You now have a two-column layout with equal widths, side-by-side.