diff --git a/source/css/base.styl b/source/css/base.styl
index dea9c93..2f4266a 100644
--- a/source/css/base.styl
+++ b/source/css/base.styl
@@ -221,29 +221,25 @@ figure.highlight
         background: rgba(200, 200, 200, 0.15)
 
     figcaption
+        margin: 0 !important
         padding: .3em .75em
-        text-align: left
         font-style: normal
         font-size: .8em
-        &:after
-            clear: both
-            content: " "
-            display: table
+
+        *
+            color: $grey
 
         span
             font-weight: 500
             font-family: $family-code
 
-        .fold
-        a
-            color: #9a9a9a
+        .level-left *:not(:last-child)
+            margin-right: .5em
 
-        a
-            float: right
-            margin-left: 0.5em
+        .level-right *:not(:first-child)
+            margin-left: .5em
 
         .fold
-            margin-right: 0.5em
             cursor: pointer
 
     .highlight-body
diff --git a/source/js/main.js b/source/js/main.js
index 6ba7333..8f219be 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -62,37 +62,46 @@
             }
         });
 
-        if (typeof ClipboardJS !== 'undefined' && config.article.highlight.clipboard) {
+
+        const clipboard = config.article.highlight.clipboard;
+        const fold = config.article.highlight.fold.trim();
+
+        $('figure.highlight').each(function() {
+            if ($(this).find('figcaption').length) {
+                $(this).find('figcaption').addClass('level');
+                $(this).find('figcaption').append('<div class="level-left">');
+                $(this).find('figcaption').append('<div class="level-right">');
+                $(this).find('figcaption div.level-left').append($(this).find('figcaption').find('span'));
+                $(this).find('figcaption div.level-right').append($(this).find('figcaption').find('a'));
+            } else {
+                if (clipboard || fold) {
+                    $(this).prepend('<figcaption class="level"><div class="level-left"></div><div class="level-right"></div></figcaption>');
+                }
+            }
+        });
+
+        if (typeof ClipboardJS !== 'undefined' && clipboard) {
             $('figure.highlight').each(function() {
                 const id = 'code-' + Date.now() + (Math.random() * 1000 | 0);
                 const button = '<a href="javascript:;" class="copy" title="Copy" data-clipboard-target="#' + id + ' .code"><i class="fas fa-copy"></i></a>';
                 $(this).attr('id', id);
-                if ($(this).find('figcaption').length) {
-                    $(this).find('figcaption').prepend(button);
-                } else {
-                    $(this).prepend('<figcaption>' + button + '</figcaption>');
-                }
+                $(this).find('figcaption div.level-right').append(button);
             });
             new ClipboardJS('.highlight .copy'); // eslint-disable-line no-new
         }
-        const fold = config.article.highlight.fold;
-        if (fold.trim()) {
+
+        if (fold) {
             $('figure.highlight').each(function() {
-                if ($(this).find('figcaption').length) {
-                    // fold individual code block
-                    if ($(this).find('figcaption').find('span').length > 0) {
-                        const span = $(this).find('figcaption').find('span').eq(0);
-                        if (span[0].innerText.indexOf('>folded') > -1) {
-                            span[0].innerText = span[0].innerText.replace('>folded', '');
-                            $(this).find('figcaption').prepend(createFoldButton('folded'));
-                            toggleFold(this, true);
-                            return;
-                        }
+                if ($(this).find('figcaption').find('span').length > 0) {
+                    const span = $(this).find('figcaption').find('span');
+                    if (span[0].innerText.indexOf('>folded') > -1) {
+                        span[0].innerText = span[0].innerText.replace('>folded', '');
+                        $(this).find('figcaption div.level-left').prepend(createFoldButton('folded'));
+                        toggleFold(this, true);
+                        return;
                     }
-                    $(this).find('figcaption').prepend(createFoldButton(fold));
-                } else {
-                    $(this).prepend('<figcaption>' + createFoldButton(fold) + '</figcaption>');
                 }
+                $(this).find('figcaption div.level-left').prepend(createFoldButton(fold));
                 toggleFold(this, fold === 'folded');
             });