JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left_comments"></div>
<div id="right_comments"></div>
<div class="article-text">
    <p><em>В Москве состоялось <a href="http://www.vesti.ru/doc.html?id=1378752">шествие против воссоединения Крыма с Россией</a>. По данным МВД, в нем участвовали <span class="sidenote" title="&lt;b&gt;Авторитетный источник&lt;/b&gt;&lt;br/&gt;Подмена">около трех тысяч человек</span>. Собравшиеся на Пушкинской площади прошли&nbsp; под российскими и украинскими флагами по столичным бульварам и остановились на митинг на проспекте Сахарова. Накануне организаторам мероприятия было направлено предостережение о недопустимости любых нарушений закона. <span class="sidenote" title="&lt;b&gt;Ещё какое-то вранье&lt;/b&gt;&lt;br/&gt;А вот тут ещё вранье, нужно, чтобы проверить лейаут блоков">Но нарушения все-таки были</span>.</em></p>
    <p>Нынешний митинг, <span class="sidenote" title="&lt;b&gt;Авторитетный источник&lt;/b&gt;&lt;br/&gt;Подмена">заявленные как антивоенный, а по сути выступивший против воссоединения Крыма с Россией</span>, мог показаться поначалу вполне обычным оппозиционно-антипутинским мероприятием, потому что во главе колонн шли все те же самые главные российские оппозционеры — Немцов, Яшин, семейство Гудковых. У многих участников были белые ленты. Но вот флаги в это раз изрядно отличались, потому что на этот раз по центру Москвы несли не только знамена "Солидарности", РПР-ПАРНАС, "Партии прогресса", но и украинские флаги, флаги Евросоюза. А особый колорит шествию добавляли молодые люди под красно-черными бандеровскими флагами. Во время прохода по столичным бульварам они громко скандировали лозунги украинских националистов.</p>
    <p>Видимо, проникнувшись духом солидарности с необандеровцами, несколько человек пытались развернуть знамя Русской освободительной народной армии. <span class="sidenote" title="&lt;b&gt;Авторитетный источник&lt;/b&gt;&lt;br/&gt;Подмена">Так называли себя полицаи и каратели</span>, действовавшие на Брянщине в годы войны. Из них потом...

CSS

body {
    font-family: 'Arial', Helvetica, 'sans-serif';
    font-size: 12px;
    line-height: 16px;
}
#left_comments {
    float:left
}
#right_comments {
    float:right
}
#right_comments div, #left_comments div {
    float:none
}
.article-text {   
    width: 400px;
    margin:auto
}
.arc90_sidenoteTXT {
    font-size: 1em;
    line-height: 1.4em;
    margin-bottom: 10px;
}

.arc90_sidenoteCLR0 {
background-color: #FFe0e0;
border: 1px solid #FF8888;
}





/*
		Unobtrusive Sidenotes v1.0
		(c) Arc90, Inc.
		
		http://www.arc90.com
		http://lab.arc90.com
		
		Licensed under : Creative Commons Attribution 2.5 http://creativecommons.org/licenses/by/2.5/
		
		Copy the below CSS into your site's style sheet or reference in the head of your document.
		*/
		
		#container {
			margin: 0 auto;
			text-align: left;
			width: 85%;
		}
		#container p { line-height: 1.7; }
		.arc90_sidenoteLNK { padding: 0 .3em; }
		.arc90_sidenoteTXT {
			width: 12em;
			padding: .5em;
		}
		}
		/* The below attirbutes handle the alternating floating */
		
		/* Float the odd numbered sidenotes to the right. */
		div.arc90_sidenoteCLR0, div.arc90_sidenoteCLR2 {
			margin: 1em 0 1em 1em;
			float: right;
		}
		/* Float the even numbered sidenotes to the left. */
		div.arc90_sidenoteCLR1, div.arc90_sidenoteCLR3 {
			margin: 1em 1em 1em 0;
			float: left;
		}

JavaScript

/*

Unobtrusive Sidenotes v1.2 (with Toggle)
(c) Arc90, Inc.

http://www.arc90.com
http://lab.arc90.com

Licensed under : Creative Commons Attribution 2.5 http://creativecommons.org/licenses/by/2.5/

*/

/* Globals */
var arc90_isIE = document.all? true: false;
var arc90_sideCLRs = 1; // total colours declared in the CSS for sidenote usage
var leftc = document.getElementById('left_comments');
var rightc = document.getElementById('right_comments');

function arc90_sidenote() {
	O = document.getElementsByTagName('SPAN');
	for (var i = 0, l = O.length, c = 0; i < l; i++) {
		var o = O[i];
		if (o != null && o.className && o.className.indexOf('sidenote') >= 0) {
			try {
				var s = arc90_newNode('div', '', 'arc90_sidenoteTXT arc90_sidenoteCLR' +c);
				var a = arc90_newNode('div', '', 'arc90_inline');
				a.innerHTML = arc90_gtlt(o.title);
				s.appendChild(a);
                if(i%2)
				    rightc.appendChild(s);
                else
                    leftc.appendChild(s);

				o.className = 'arc90_sidenoteLNK arc90_sidenoteCLR' +c;
				c = c + 1 < arc90_sideCLRs? c+1: 0;
			} catch (err) {
				o = null;
			}
		}
	}
}

function arc90_gtlt(s) {
	s = s.replace(/&gt;/g, '>');
	s = s.replace(/&lt;/g, '<');
	return s;
}

/* Events */
function arc90_isString(o) { return (typeof(o) == "string"); }

function arc90_addEvent(e, meth, func, cap) {
	if (arc90_isString(e))	e = document.getElementById(e);

	if (e.addEventListener){
		e.addEventListener(meth, func, cap);
    	return true;
	}	else if (e.attachEvent)
		return e.attachEvent("on"+ meth, func);
	return false;
}

/* Nodes */
function arc90_newNode(t, i, s, x, c) {
	var node = document.createElement(t);
	if (x != null && x != '') {
		var n = document.createTextNode(x);
		node.appendChild(n);
	}
	if (i != null && i != '')
		node.id = i;
	if (s != null && s != '')
		node.className = s;
	if (c != null && c != '')
		node.appendChild(c);
	return node;
}

/* Add Events */
//arc90_addEvent(window, 'load',...