Remembering someone had a concern about limited text space in
adjacent windows -
Here is one idea for width sharing:
Load the demo in a browser (on Android, Opera is good for mouse interaction and more)
Dragging a vertical divider could be another solution, but never investigated that.
Code: [Local Link Removed for Guests]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container {
font-family: "SourceCodePro-Regular", "Droid Sans Mono", "monospace", "monospace"; // band aid
position: absolute;
display: flex;
width: 50%;
height: 90%;
}
.left {
max-height: 100%;
min-width: 33%;
max-width: 67%;
padding: 10px;
flex: 1 1 auto;
overflow: none;
white-space: break-spaces;
background-color: green;
outline: none;
}
.right {
max-height: 100%;
min-width: 33%;
max-width: 67%;
padding: 10px;
flex: 1 1 auto;
overflow: none;
white-space: break-spaces;
background-color: red;
outline: none;
}
</style>
</head>
<body>
<p>Demo of Auto Sharing Column Widths</p>
<div class="container">
<div class="left" contenteditable>Write here to expand<br>and shrink 1111111 222222222 3333333 444444<br>- Auto wrap at word
endings.
With this config - consecutive spaces are preserved,
*BR* is active and hidden, embedded CR/LF is active.
Here is table for different adaptions:
https://developer.mozilla.org/en-us/docs/Web/CSS/white-space</div>
<div class="right" contenteditable>Erase both fields and please try it at home -
Look, no heavy framework or java script!<div style="font-size: 24px">😲</div>============================
The initial column widths are 50/50% wide.
Both the red and green columns will dynamically yield it's width
within 33 > 67% of the total container width if the adjacent
column currently has the longest line length.
Ex. If a wide log listing is erased, the other column
will directly reclaim it's eventually yielded width.
</div>
</div>
</body>
</html>