在渲染一些HTML文档时，我想模仿手写注释的过程，在该过程中有一个主要文本，并且一些注释与突出显示的文本位于同一水平处，位于右边距。
我使用CSS网格机制来设置主区域（用于主文本）和侧边区域（用于批注）。
jsfiddle上提供了一些说明问题和所需结果的示例代码。该代码复制如下。
HTML代码：
if (maybeBool ?? false) ...null
使用CSS grid和flex容器，我可以朝正确的方向前进，并将注释与标记的文本对齐。但是，该解决方案并不令人满意，因为它引入了新的.kb-container {
display: grid;
grid-template-columns: 4fr 2em 2fr;
grid-template-rows: auto;
grid-template-areas: "main . side";
}
.kb-main {
grid-area: main;
}
.kb-side {
grid-area: side;
}块元素，从而破坏了最初的文本组成（使用内联元素<body>
<div class="kb-container">
<div class="kb-main">
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,turpis et commodo pharetra,est eros bibendum elit,nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper,ligula eu tempor congue,eros est euismod turpis,id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. <mark>Donec fermentum</mark>. pellentesque malesuada nulla a mi. Duis sapien sem,aliquet nec,commodo eget,consequat quis,neque. Aliquam faucibus,elit ut dictum aliquet,felis nisl adipiscing sapien,sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem,dapibus quis,laoreet et,pretium ac,nisi. Aenean magna nisl,mollis quis,molestie eu,feugiat in,orci. In hac habitasse platea dictumst.</p>
</div>
<div class="kb-side">This is a side note (currently not,lined up with "Donec fermentum").</div>
</div>
</body>）。
<div>