Edit in JSFiddle

Go to "Result" tab
<div style="font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;background-color:#F5F5F5;padding:15px;margin:0 auto;color: #1d1f24;">
  <table width="100%" style="max-width:570px;margin:0 auto" align="center" cellspacing="0" cellpadding="0">
    <tbody>
      <tr height="55px">
        <td style="border-collapse:collapse;padding-bottom: 15px;" valign="middle">
          <a href="localhost" style="margin:0;padding:0;color:#3b7ed5;font-size:13px;font-weight:400;line-height:18px;text-decoration:none" target="_blank"><img src="http://playground.xwiki.org/xwiki/skins/flamingo/logo.svg" style="border:0;line-height:100%;outline:none;text-decoration:none;max-width:100%; width: 100px;margin-left: -5px;"></a>
        </td>
        <td style="border-collapse:collapse;padding-left:4px; text-align: right;padding-bottom: 15px;"><a href="localhost" style="margin:0;padding:0;font-size:13px;font-weight:400;line-height:18px;text-decoration:none;color:#0088CC" target="_blank"><span class="fa fa-cog"></span> Notifications</a></td>
      </tr>
      <tr>
        <td style="border-collapse:collapse;padding-bottom:5px;" valign="middle" colspan="2">
          <div style="border-left: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0;">
            <div style="background:white;margin-bottom:20px;padding:1em; border-left: 1px solid #eaeaea;border-right: 1px solid #eaeaea;border-bottom: 1px solid #ddd;border-top: 1px solid #f0f0f0;">
              <h1 style="font-size:30px;font-style:normal;font-weight:500;line-height:42px;letter-spacing:normal;margin-top: 0;font-size:21px;margin-bottom: 0;">Summary</h1>
              <p style="font-size:14px;font-style:normal;font-weight:400;line-height:42px;letter-spacing:normal;margin:0;padding:0;">2 new events by 1 user on 2 pages, since 12:00 (Wed, 11 Oct)</p>
              <div style="margin-bottom: 5px;">
                <ul class="jstree-container-ul jstree-children tree">
                  <li id="wiki:xwiki" class="jstree-node  jstree-last jstree-open"><a class="jstree-anchor" href="." id="wiki:xwiki_anchor"><i class="jstree-icon jstree-themeicon fa fa-hdd-o jstree-themeicon-custom"></i>Home</a>
                    <ul class="jstree-container-ul jstree-children">
                      <li id="document:xwiki:Blog.WebHome" class="jstree-node jstree-open"><i class="jstree-icon jstree-ocl"></i><a class="jstree-anchor" href="." id="document:xwiki:Blog.WebHome_anchor"><i class="jstree-icon jstree-themeicon fa fa-file-o jstree-themeicon-custom"></i>Blog</a>
                        <ul class="jstree-children">
                          <li id="document:xwiki:Blog.Roadmap0" class="jstree-node  jstree-leaf jstree-last"><i class="jstree-icon jstree-ocl"></i><a class="jstree-anchor" href="#document:xwiki:Blog.Roadmap0_link" id="document:xwiki:Blog.Roadmap0_anchor" style="color: #0088CC"><i class="jstree-icon jstree-themeicon fa fa-file-o jstree-themeicon-custom" ></i>Roadmap0</a>
                            <span class="badge" title="1 event">1</span>
                          </li>
                        </ul>
                      </li>
                      <li id="document:xwiki:XWiki.WebHome" class="jstree-node  jstree-last jstree-open"><i class="jstree-icon jstree-ocl"></i><a class="jstree-anchor" href="." id="document:xwiki:XWiki.WebHome_anchor"><i class="jstree-icon jstree-themeicon fa fa-file-o jstree-themeicon-custom" ></i>XWiki</a>
                        <ul class="jstree-children">
                          <li id="document:xwiki:XWiki.vmassol" class="jstree-node  jstree-leaf jstree-last"><i class="jstree-icon jstree-ocl"></i><a class="jstree-anchor" href="#document:xwiki:XWiki.vmassol_link" id="document:xwiki:XWiki.vmassol_anchor" style="color: #0088CC"><i class="jstree-icon jstree-themeicon fa fa-file-o jstree-themeicon-custom"></i>Profile of Vincent Massol</a>
                            <span class="badge" title="1 event">1</span>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div style="border-left: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0;">
            <div style="background:white;padding:1em; border-left: 1px solid #eaeaea;border-right: 1px solid #eaeaea;border-bottom: 1px solid #ddd;border-top: 1px solid #f0f0f0;">
              <h1 style="font-size:30px;font-style:normal;font-weight:500;line-height:42px;letter-spacing:normal; margin-top: 0;font-size:21px;">Events</h1>
              <div class="notification-event" style="font-size: 14px;">
                <div class="clearfix row">
                  <div class="col-xs-3 notification-avatar" style="width: 80px; float: left; position: relative;">
                    <a href="/xwiki/bin/view/XWiki/vmassol">
                      <img src="http://localhost:8082/xwiki/bin/download/XWiki/vmassol/vincent.png" class="img-thumbnail" alt="" style="height: 55px;">
                    </a>
                    <div class="notification-icon" title="Blog Application">
                      <span class="fa-stack fa-xs" style="    font-size: .5em;position: absolute;bottom: -5px;border: 1px solid #ccc;right: -5px;border-radius: 50%;background-color: #fff;box-shadow: 0px 1px 0px #E8E8E8;" title="Blog Application"><span class="fa fa-circle fa-stack-2x fa-inverse"></span>
                      <span class="fa fa-plus fa-stack-1x " title="Created blog post"></span>
                      </span>
                      <span class="fa fa-rss"></span>
                    </div>
                  </div>
                  <div class="col-xs-9 notification-content" style="float: left">
                    <div><a href="/xwiki/bin/view/Blog/Roadmap0" id="document:xwiki:Blog.Roadmap0_link" style="color: #0088CC;">Roadmap0</a></div>
                    <div class="notification-content-type">published by <span class="wikilink"><a href="/xwiki/bin/view/XWiki/vmassol">Vincent Massol</a></span></div>
                    <div class="noitems" title="2017/10/10 12:55">12:55, 11 Oct 2017</div>
                  </div>
                  <label for="reveal-event1" class="details"><span class="noitems">Details <span class="fa fa-ellipsis-h"></span></span>
                  </label>
                  <input type="checkbox" id="reveal-event1" role="button">
                  <div id="event1" class="clearfix">
                    <div style="">

                      <div style="margin:0;padding-left:82px;">
                        <h3 style="font-weight: 400; display: none;">Details</h3>
                        <dl class="m_5713937643535329979diff-group">
                          <dt id="m_5713937643535329979diff-680510288">
                      <span class="m_5713937643535329979diff-icon m_5713937643535329979diff-icon-change" title="change"><span class="m_5713937643535329979fa m_5713937643535329979fa-file-text-o"></span>
                      </span>
                      <h4 style="font-weight: 400;margin-bottom: 5px;">Page properties</h4>
                    </dt>
                          <dd style="margin-left:0">
                            <dl>
                              <dt style="border:1px solid #e8e8e8;border-left:5px solid #e8e8e8;border-bottom:0;color:#656565;font-weight:normal;margin:0;padding:0 .2em;">
                          Title
                        </dt>
                              <dd style="margin-left:0">
                                <div style="border:1px solid #e8e8e8;font-family:Monospace;font-size:12px;overflow:auto">
                                  <table style="border-collapse: collapse;">
                                    <tbody>
                                      <tr style="display: none;">
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td class="m_5713937643535329979diff-line" style="background-color:#eee;color:rgba(101,101,101,0.5);font-family:Monospace;padding:.4em .5em">@@ -1,0 +1,1 @@</td>
                                      </tr>
                                      <tr>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top;min-width:18px; min-width: 18px;"></td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top;min-width:18px; min-width: 18px;">1</td>
                                        <td style="background-color:#dfd;padding:5px;margin:5px;">+Roadmap0</td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </dd>
                              <dt style="border-left:5px solid #e8e8e8;border-right:1px solid #e8e8e8;color:#656565;font-weight:normal;margin:0;padding:0 .2em;">
                          Parent
                        </dt>
                              <dd style="margin-left:0">
                                <div style="border:1px solid #e8e8e8;font-family:Monospace;font-size:12px;overflow:auto">
                                  <table style="border-collapse: collapse;">
                                    <tbody>
                                      <tr style="display: none;">
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td class="m_5713937643535329979diff-line" style="background-color:#eee;color:rgba(101,101,101,0.5);font-family:Monospace;padding:.4em .5em">@@ -1,0 +1,1 @@</td>
                                      </tr>
                                      <tr>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width: 18px;"></td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width:18px">1</td>
                                        <td style="background-color:#dfd;padding:5px;margin:5px;">+Blog.WebHome</td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </dd>
                              <dt style="border-left:5px solid #e8e8e8;border-right:1px solid #e8e8e8;color:#656565;font-weight:normal;margin:0;padding:0 .2em;">
                          Author
                        </dt>
                              <dd style="margin-left:0">
                                <div style="border:1px solid #e8e8e8;font-family:Monospace;font-size:12px;overflow:auto">
                                  <table style="border-collapse: collapse;">
                                    <tbody>
                                      <tr style="display: none">
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td class="m_5713937643535329979diff-line" style="background-color:#eee;color:rgba(101,101,101,0.5);font-family:Monospace;padding:.4em .5em">@@ -1,1 +1,1 @@</td>
                                      </tr>
                                      <tr>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">1</td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top"></td>
                                        <td style="background-color:#fdd;padding:5px;margin:5px;">-XWiki.
                                          <del style="background-color:#faa;text-decoration:none; padding: 5px;">XWikiGue</del>s
                                          <del style="background-color:#faa;text-decoration:none; padding: 5px;">t</del>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width: 18px;"></td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width: 18px;">1</td>
                                        <td style="background-color:#dfd;padding:5px;margin:5px;">+XWiki.
                                          <ins style="background-color:#afa;text-decoration:none; padding: 5px;">vma</ins>s
                                          <ins style="background-color:#afa;text-decoration:none; padding: 5px;">sol</ins>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </dd>
                              <dt style="border-left:5px solid #e8e8e8;border-right:1px solid #e8e8e8;color:#656565;font-weight:normal;margin:0;padding:0 .2em;">
                          Default language
                        </dt>
                              <dd style="margin-left:0">
                                <div style="border:1px solid #e8e8e8;font-family:Monospace;font-size:12px;overflow:auto">
                                  <table style="border-collapse: collapse;">
                                    <tbody>
                                      <tr style="display: none">
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td class="m_5713937643535329979diff-line" style="background-color:#eee;color:rgba(101,101,101,0.5);font-family:Monospace;padding:.4em .5em">@@ -1,0 +1,1 @@</td>
                                      </tr>
                                      <tr>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width: 18px;"></td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width: 18px;">1</td>
                                        <td style="background-color:#dfd;padding:5px;margin:5px;">+en</td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </dd>
                            </dl>
                          </dd>
                        </dl>
                        <dl class="m_5713937643535329979diff-group">
                          <dt id="m_5713937643535329979diff-1615192717">
                      <span class="m_5713937643535329979diff-icon m_5713937643535329979diff-icon-insert" title="insert"><span class="m_5713937643535329979fa m_5713937643535329979fa-cubes"></span>
                      </span>
                      <h4 style="font-weight: 400;margin-bottom: 5px;">Blog.BlogPostClass[0]</h4>
                    </dt>
                          <dd style="margin-left:0">
                            <dl>
                              <dt style="border:1px solid #e8e8e8;border-left:5px solid #e8e8e8;border-bottom:0;color:#656565;font-weight:normal;margin:0;padding:0 .2em;">
                          Category
                        </dt>
                              <dd style="margin-left:0">
                                <div style="border:1px solid #e8e8e8;font-family:Monospace;font-size:12px;overflow:auto">
                                  <table style="border-collapse:collapse;">
                                    <tbody>
                                      <tr style="display: none;">
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td class="m_5713937643535329979diff-line" style="background-color:#eee;color:rgba(101,101,101,0.5);font-family:Monospace;padding:.4em .5em">@@ -1,0 +1,1 @@</td>
                                      </tr>
                                      <tr>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width: 18px;"></td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width: 18px;">1</td>
                                        <td style="background-color:#dfd;padding:5px;margin:5px;">+Blog.News</td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </dd>
                              <dt style="border-left:5px solid #e8e8e8;border-right:1px solid #e8e8e8;color:#656565;font-weight:normal;margin:0;padding:0 .2em;">
                          Is hidden
                        </dt>
                              <dd style="margin-left:0">
                                <div style="border:1px solid #e8e8e8;font-family:Monospace;font-size:12px;overflow:auto">
                                  <table style="border-collapse: collapse;">
                                    <tbody>
                                      <tr style="display: none;">
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td class="m_5713937643535329979diff-line" style="background-color:#eee;color:rgba(101,101,101,0.5);font-family:Monospace;padding:.4em .5em">@@ -1,0 +1,1 @@</td>
                                      </tr>
                                      <tr>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width: 18px;"></td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width: 18px;">1</td>
                                        <td style="background-color:#dfd;padding:5px;margin:5px;">+No</td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </dd>
                              <dt style="border-left:5px solid #e8e8e8;border-right:1px solid #e8e8e8;color:#656565;font-weight:normal;margin:0;padding:0 .2em;">
                          Publish date
                        </dt>
                              <dd style="margin-left:0">
                                <div style="border:1px solid #e8e8e8;font-family:Monospace;font-size:12px;overflow:auto">
                                  <table style="border-collapse: collapse;">
                                    <tbody>
                                      <tr style="display: none;">
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td class="m_5713937643535329979diff-line" style="background-color:#eee;color:rgba(101,101,101,0.5);font-family:Monospace;padding:.4em .5em">@@ -1,0 +1,1 @@</td>
                                      </tr>
                                      <tr>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width: 18px;"></td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width: 18px;">1</td>
                                        <td style="background-color:#dfd;padding:5px;margin:5px;">+2017-10-10 <span class="aBn" data-term="goog_740947355" tabindex="0"><span class="aQJ">12:54:59.0</span></span>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </dd>
                              <dt style="border-left:5px solid #e8e8e8;border-right:1px solid #e8e8e8;color:#656565;font-weight:normal;margin:0;padding:0 .2em;">
                          Is published
                        </dt>
                              <dd style="margin-left:0">
                                <div style="border:1px solid #e8e8e8;font-family:Monospace;font-size:12px;overflow:auto">
                                  <table style="border-collapse: collapse;">
                                    <tbody>
                                      <tr style="display: none;">
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td class="m_5713937643535329979diff-line" style="background-color:#eee;color:rgba(101,101,101,0.5);font-family:Monospace;padding:.4em .5em">@@ -1,0 +1,1 @@</td>
                                      </tr>
                                      <tr>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width: 18px;"></td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width: 18px;">1</td>
                                        <td style="background-color:#dfd;padding:5px;margin:5px;">+Yes</td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </dd>
                              <dt style="border-left:5px solid #e8e8e8;border-right:1px solid #e8e8e8;color:#656565;font-weight:normal;margin:0;padding:0 .2em;">
                          Title
                        </dt>
                              <dd style="margin-left:0">
                                <div style="border:1px solid #e8e8e8;font-family:Monospace;font-size:12px;overflow:auto">
                                  <table style="border-collapse: collapse;">
                                    <tbody>
                                      <tr style="display: none;">
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td class="m_5713937643535329979diff-line" style="background-color:#eee;color:rgba(101,101,101,0.5);font-family:Monospace;padding:.4em .5em">@@ -1,0 +1,1 @@</td>
                                      </tr>
                                      <tr>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width:18px;"></td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width: 18px;">1</td>
                                        <td style="background-color:#dfd;padding:5px;margin:5px;">+Roadmap0</td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </dd>
                            </dl>
                          </dd>
                        </dl>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr style="border: none; border-top: 1px dashed #e8e8e8;margin: 15px 0;">
              <div class="notification-event" style="font-size: 14px;">
                <div class="clearfix row">
                  <div class="col-xs-3 notification-avatar" style="width: 80px; float: left; position: relative;">
                    <a href="/xwiki/bin/view/XWiki/vmassol">
                      <img src="http://localhost:8082/xwiki/bin/download/XWiki/vmassol/vincent.png" class="img-thumbnail" alt="" style="height: 55px;">
                    </a>
                    <div class="notification-icon" title="Edit page"><span class="fa fa-pencil"></span>
                    </div>
                  </div>
                  <div class="col-xs-9 notification-content" style="float: left">
                    <div><a href="/xwiki/bin/view/XWiki/vmassol" id="document:xwiki:XWiki.vmassol_link" style="color: #0088CC;">Profile of Vincent Massol</a></div>
                    <div class="notification-content-type">edited by <span class="wikilink"><a href="/xwiki/bin/view/XWiki/vmassol">Vincent Massol</a></span></div>
                    <div class="noitems" title="2017/10/10 12:55">12:55, 11 Oct 2017</div>
                  </div>

                  <label for="reveal-event2" class="details"><span class="noitems">Details <span class="fa fa-ellipsis-h"></span></span>
                  </label>
                  <input type="checkbox" id="reveal-event2" role="button">

                  <div id="event2" class="clearfix">
                    <div style="">
                      <div style="margin:0;padding-left:82px;">
                        <h3 style="font-weight: 400; display: none;">Details</h3>
                        <dl class="m_5713937643535329979diff-group">
                          <dt id="m_5713937643535329979diff-701850346">
                      <span class="m_5713937643535329979diff-icon m_5713937643535329979diff-icon-change" title="change"><span class="m_5713937643535329979fa m_5713937643535329979fa-paperclip"></span>
                      </span>
                      vincent.png
                    </dt>
                          <dd style="margin-left:0">
                            <dl>
                              <dt style="border-left:5px solid #e8e8e8;border-right:1px solid #e8e8e8;color:#656565;font-weight:normal;margin:0;padding:0 .2em;">
                          Size
                        </dt>
                              <dd style="margin-left:0">
                                <div style="border:1px solid #e8e8e8;font-family:Monospace;font-size:12px;overflow:auto">
                                  <table style="border-collapse: collapse;">
                                    <tbody>
                                      <tr style="display: none;">
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td class="m_5713937643535329979diff-line" style="background-color:#eee;color:rgba(101,101,101,0.5);font-family:Monospace;padding:.4em .5em">@@ -1,1 +1,1 @@</td>
                                      </tr>
                                      <tr>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width: 18px;">1</td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width: 18px;"></td>
                                        <td style="background-color:#fdd;padding:5px;margin:5px;">-
                                          <del style="background-color:#faa;text-decoration:none; padding: 5px;">0</del>
                                          <del style="background-color:#faa;text-decoration:none; padding: 5px;">bytes</del>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top"></td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">1</td>
                                        <td style="background-color:#dfd;padding:5px;margin:5px;">+
                                          <ins style="background-color:#afa;text-decoration:none; padding: 5px;">2.1</ins>
                                          <ins style="background-color:#afa;text-decoration:none; padding: 5px;">KB</ins>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </dd>
                              <dt style="border-left:5px solid #e8e8e8;border-right:1px solid #e8e8e8;color:#656565;font-weight:normal;margin:0;padding:0 .2em;display: none;">
                          Content
                          <span class="m_5713937643535329979diff-info-icon" title="This is not a text file or the file is too large"><span class="m_5713937643535329979fa m_5713937643535329979fa-info-circle"></span>
                          </span>
                        </dt>
                            </dl>
                          </dd>
                        </dl>
                        <dl class="m_5713937643535329979diff-group">
                          <dt id="m_5713937643535329979diff-1675792019">
                      <span class="m_5713937643535329979diff-icon m_5713937643535329979diff-icon-change" title="change"><span class="m_5713937643535329979fa m_5713937643535329979fa-cubes"></span>
                      </span>
                      XWiki.WatchListClass[0]
                    </dt>
                          <dd style="margin-left:0">
                            <dl>
                              <dt style="border-left:5px solid #e8e8e8;border-right:1px solid #e8e8e8;border-top:1px solid #e8e8e8;color:#656565;font-weight:normal;margin:0;padding:0 .2em;">
                          Page list, comma separated
                        </dt>
                              <dd style="margin-left:0">
                                <div style="border:1px solid #e8e8e8;font-family:Monospace;font-size:12px;overflow:auto">
                                  <table style="border-collapse: collapse;">
                                    <tbody>
                                      <tr style="display: none;">
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">...</td>
                                        <td class="m_5713937643535329979diff-line" style="background-color:#eee;color:rgba(101,101,101,0.5);font-family:Monospace;padding:.4em .5em">@@ -1,1 +1,1 @@</td>
                                      </tr>
                                      <tr>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width: 18px;">1</td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top; min-width: 18px;"></td>
                                        <td style="background-color:#fdd;padding:5px;margin:5px;">-xwiki:XWiki.vmassol xwiki:Roadmap 9\.10.WebHome xwiki:Roadmap.WebHome xwiki:Blog.Releases xwiki:Blog.Roadmap xwiki:Main.WebHome</td>
                                      </tr>
                                      <tr>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top"></td>
                                        <td style="border-right:1px solid #e8e8e8;color:rgba(101,101,101,0.5);font-family:Monospace;font-size:0.8em;text-align:right;vertical-align:top">1</td>
                                        <td style="background-color:#dfd;padding:5px;margin:5px;">+xwiki:XWiki.vmassol xwiki:Roadmap 9\.10.WebHome xwiki:Roadmap.WebHome xwiki:Blog.Releases xwiki:Blog.Roadmap xwiki:Main.WebHome
                                          <ins style="background-color:#afa;text-decoration:none;"> xwiki:Blog.Roadmap0</ins>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </dd>
                            </dl>
                          </dd>
                        </dl>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>

        </td>
      </tr>
      <tr>
        <td colspan="2" valign="top" style="padding-top:15px;color:#707070;font-size:12px;line-height:18px;text-align:center;font-weight:none" align="center" rowspan="1" colspan="1">
          <span>This email was sent to keep you notified about changes on your wikis.</span>
          <br clear="none">
          <a href="" target="_blank" style="display: none;margin-top: 5px;">
            <img src="http://playground.xwiki.org/xwiki/skins/flamingo/logo.svg" width="90px" border="0" alt="XWiki">
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</div>
.jstree-node,
.jstree-children,
.jstree-container-ul {
  list-style-type: none;
  list-style-image: none;
}

.jstree-icon:empty {
  display: inline-block;
  text-decoration: none;
  margin: 0;
  padding: 0;
  vertical-align: inherit;
  text-align: center;
  padding-right: 5px;
  margin-left: -7px;
}

.jstree-anchor {
  color: inherit;
  text-decoration: none;
}

.jstree-node {
  min-height: 24px;
  line-height: 24px;
  min-width: 24px;
}

.jstree-anchor {
  line-height: 28px;
  height: 24px;
}

.jstree-icon {
  color: #333333;
  display: inline-block;
  text-decoration: none;
  margin: 0;
  padding: 0;
  vertical-align: inherit;
  text-align: center;
}

ul.tree,
ul.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

ul.tree ul {
  margin-left: 10px;
}

ul.tree li {
  margin: 0;
  padding: 0 0 0 10px;
  line-height: 20px;
  border-left: 1px solid rgb(100, 100, 100);
}

ul.tree li:last-child {
  border-left: none;
}

ul.tree li:before {
  position: relative;
  top: -0.3em;
  height: 1em;
  width: 12px;
  color: white;
  border-bottom: 1px solid rgb(100, 100, 100);
  content: "";
  display: inline-block;
  left: -10px;
}

ul.tree li:last-child:before {
  border-left: 1px solid rgb(100, 100, 100);
}

.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 9px;
  color: #757575;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  background-color: #F5F5F5;
  border-radius: 10px;
  margin-left: 5px;
  margin-bottom: 4px;
  border: 1px solid #eaeaea;
}

.img-thumbnail {
  padding: 4px;
  line-height: 1.428571429;
  background-color: #F5F5F5;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}

.notification-icon span {
  vertical-align: middle;
}

.notification-icon {
  font-size: 2em;
  text-align: center;
}

.notification-avatar {
  position: relative;
  padding-right: 0;
}

.notification-icon {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 100%;
  min-width: 22px;
  font-size: 1em;
  position: absolute;
  bottom: -5px;
  left: -5px;
  min-width: 28px;
  font-size: 1.1em;
  min-height: 28px;
}

.noitems {
  margin-top: 5px;
  color: #777777;
  font-size: 12px;
}

.notification-event a {
  color: #0088CC;
  text-decoration: none;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked~#event2,
input[type=checkbox]:checked~#event1 {
  display: block;
}

#event2, #event1 {
  display: none;
}

.details {
  float: right;
}

External resources loaded into this fiddle: