Need AceEditor besides a FirePad in the same page, each inside divs, side-by-side with some spacings all around, firepad cloned to aceeditor y vice versa**

Need a experience JS programmer. No use of jQuery or anything else similar beside the minimum (just ACE editor plug in and FirePad plugin and JavaScript). No other language beside JS (no PHP, no java or other), just JS (and Html, and css of course!). Need AceEditor (on the right) besides a FirePad (on the left of the page) in the same page, each inside divs, side-by-side with some spacings all around, firepad content cloned to the AceEditor live as it shows modifications made by other users, but displayed differently in the AceEditor field. Anything typed in one can be seen on other. The filter on the AceEditor is that everything is displayed differently, depending on the user. Some see every word w.i.t.h. a. d.o.t. i.n. e.a.c.h. w.o.r.d. other j u s t a s p a c e, depending on a different setting each user can have (setting selected on button outside the editors). on the Ace Editor where everything looks modified, differences like adding dots in newly entered line only is updated upon exiting the line with an Enter or the arrows in the AceEditors. New complete lines on the FirePad seen with the added modifications on the AceEditor. Thanks.