<!DOCTYPE html>
<html lang="en">
 <head>
  <meta "charset=utf-8">
  <style>
  p {
    background: yellow;
    margin: 0 0 1em 0;
    font-family: monospace;
    hyphens: auto;
  }
  </style>
<body>
<h3>The columns should appear identical; "relative" should never be hyphenated</h3>
<div style="columns:2">
<p style="width: 16ch">the   flow-relative        flow-relative    flow-relative     flow-relative    flow-relative</p>
<p style="width: 20ch">the   flow-relative        flow-relative    flow-relative     flow-relative    flow-relative</p>
<p style="width: 24ch">the   flow-relative        flow-relative    flow-relative     flow-relative    flow-relative</p>
<p style="width: 41ch">the   flow-relative        flow-relative    flow-relative     flow-relative    flow-relative</p>
<p style="width: 50ch">the   flow-relative        flow-relative    flow-relative     flow-relative    flow-relative</p>

<p style="width: 16ch">the flow-relative flow-relative flow-relative flow-relative flow-relative</p>
<p style="width: 20ch">the flow-relative flow-relative flow-relative flow-relative flow-relative</p>
<p style="width: 24ch">the flow-relative flow-relative flow-relative flow-relative flow-relative</p>
<p style="width: 41ch">the flow-relative flow-relative flow-relative flow-relative flow-relative</p>
<p style="width: 50ch">the flow-relative flow-relative flow-relative flow-relative flow-relative</p>