Left panel — plain text.

Drag the splitter bar left or right
to redistribute panel widths.

Click this panel to grow it by one step.
Each click transfers 40px from right to left.

Right panel — plain text.

Click this panel to grow it by one step.
Each click transfers 40px from left to right.

The total component width stays fixed at 60rem.

#include <iostream>
#include <vector>
#include <numeric>
#include <algorithm>

int main() {
    std::vector<int> v = {5, 3, 8, 1, 9, 2, 7};

    std::sort(v.begin(), v.end());

    int sum = std::accumulate(v.begin(), v.end(), 0);
    double avg = static_cast<double>(sum) / v.size();

    std::cout << "sorted: ";
    for (int x : v) std::cout << x << " ";
    std::cout << "\nsum = " << sum
              << "  avg = " << avg << "\n";
    return 0;
}
    

fn main() {
    let mut v = vec![5, 3, 8, 1, 9, 2, 7];

    v.sort();

    let sum: i32 = v.iter().sum();
    let avg = sum as f64 / v.len() as f64;

    print!("sorted: ");
    for x in &v { print!("{x} "); }
    println!("\nsum = {sum}  avg = {avg}");
}
    

// module pattern
const counter = (() => {
  let _n = 0;
  return {
    inc: () => ++_n,
    dec: () => --_n,
    val: () => _n,
  };
})();

console.log(counter.inc()); // 1
console.log(counter.inc()); // 2
console.log(counter.dec()); // 1
    

/* component container */
.container {
  display: flex;
  flex-direction: row;
  border: 2px solid var(--dark, #333);
  box-shadow: 5px 5px 5px #999;
  box-sizing: border-box;
  overflow: hidden;
}

.panel-left  { flex: none; }
.panel-right { flex: 1; min-width: 0; }

.splitter {
  flex: none;
  cursor: col-resize;
  user-select: none;
}