<!DOCTYPE html>
<html>
<head>
<style>
.scroll-y {
overflow-y: auto;
height: 200px;
background-color:aquamarine;
}
.scroll-x {
overflow-x: auto;
width: 400px;
background-color: lawngreen;
}
.container {
position: relative;
}
.gridcontainer {
display: grid;
grid-template-columns: 200px auto 200px;
}
.simpleline {
color: brown;
}
.item {
border-style:solid;
border-width: 1px;
border-color: darkgreen;
background-color: lightgreen;
}
.block {
display: inline-block;
}
</style>
<script type ="module" defer>
import { SimpleLine } from "../amd/src/simpleline.js";
let line = new SimpleLine("#start","#end", {autorefresh: 10});
let line2 = new SimpleLine("#start2","#end2",{autorefresh: 10, anchors: {start: ["bottom","right"], end: ["top","left"]}});
</script>
</head>
<body>
<div class="scroll-y">
<h2> Header</h2>
<div class="scroll-x container">
<div class="gridcontainer">
<div id="start" class="item">Random text to show stuff</div>
<div class="item"><textarea></textarea></div>
<div></div>
<div></div>
<div></div>
<div id="end" class="item">More random text</div>
</div>
</div>
</div>
<div class="container">
<div id="start2" class="item block">Random text to show stuff</div>
<div class="item block"><textarea></textarea></div>
<div id="end2" class="item block">More random text</div>
</div>
</body>
</html>