Блог

У меня есть структура компонентов Bootstrap React следующим образом:

 lt;React.Fragmentgt;  lt;Rowgt;  lt;Col md="6"gt;  {blogs.map((blog) =gt; {  return(  lt;h1gt;{blog.heading}lt;/h1gt;  lt;pgt;{blog.content}lt;/pgt;  );  }  lt;/Colgt;  lt;Col md="6"gt;  {blogs.map((blog) =gt; {  return(  lt;pgt;{blog.writer_name}lt;/pgt;  lt;pgt;|lt;/pgt;  lt;pgt;|lt;/pgt;  );  }  lt;/Colgt;  lt;/Rowgt;  lt;React.Fragmentgt;  

Поскольку {blog.content} он может быть любой длины и может занимать любое количество строк, я хочу убедиться, что {blog.writer_name} он находится рядом {blog.heading} с остальной областью, пока следующая {blog.heading} не будет покрыта lt;pgt;|lt;/pgt; буквой s по вертикали, чтобы она выглядела как пунктирная линия — для каждой blog !

Как мне это сделать? Любые предложения приветствуются.