Panel: Move caret to its own wrapper

The caret is combined with the header content. It is usually rendered
like this:

> Some heading

However, custom header contents, after markdown rendering, will be
wrapped with block HTML tags such as <p> and <h1>, which will make
browsers render a line break between the caret and header content:

>
Some heading

Let's fix this by moving the caret to a separate div. Then, make
everything inside a panel header be on a single line by using CSS
'display: inline-block' and 'width: ...', such that the width adds up to
100%.

    +--------+-----------------+---------+
    | caret  |  header-content | buttons |
    | (32px) | (100% - 32 - 32)|  (32px) |
    +--------+-----------------+---------+

Thanks to @nusjzx for providing the fix to the button-wrapper in PR
MarkBind#86, in which his use of
'calc(100% - 32px)' provided a source of inspiration for this fix. His
fix in that PR is incorporated into this commit because without it, the
responsive design will not work.

An alternative fix considered was to use md.renderInline(). However,
md.renderInline() does not render markdown headings.

Another alternative fix was to insert the caret directly inside the
header content. However, after PR MarkBind#74, MarkBind#81 and MarkBind#83 were merged, new
problems continue to emerge.

These problems are reported as comments in these pages:
- MarkBind#74
- MarkBind#81
- MarkBind#83
- MarkBind/markbind#373
- MarkBind/markbind#383

As such, the PRs for this alternative fix has been reverted by the
previous commits before this commit.

Author: yamgent

src/Panel.vue

@@ -16,8 +16,10 @@
             <div :class="['card-header',{'header-toggle':isExpandableCard}, cardType, borderType]"
                  @click.prevent.stop="isExpandableCard && toggle()"
                  @mouseover="onHeaderHover = true" @mouseleave="onHeaderHover = false">
-                <div class="header-wrapper">
+                <div class="caret-wrapper">
                     <span :class="['glyphicon', localExpanded ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right']" v-show="showCaret"></span>
+                </div>
+                <div class="header-wrapper">
                     <slot name="header">
                         <div :class="['card-title', cardType, {'text-white':!isLightBg}]" v-html="headerContent"></div>
                     </slot>
@@ -316,15 +318,21 @@
         margin: 0px !important;
     }
 
+    .caret-wrapper {
+        float: left;
+        display: inline-block;
+        width: 32px;
+    }
+
     .header-wrapper {
         display: inline-block;
-        width: 72%;
+        width: calc(100% - 32px - 96px);
     }
 
     .button-wrapper {
         float: right;
         display: inline-block;
-        width: 28%;
+        width: 96px;
     }
 
     .header-toggle {
@@ -403,12 +411,21 @@
     /* Bootstrap extra small(xs) responsive breakpoint */
     @media (max-width: 575.98px) {
 
+        .caret-wrapper {
+            float: left;
+            display: inline-block;
+            width: 32px;
+        }
+
         .header-wrapper {
-            width: 88%;
+            display: inline-block;
+            width: calc(100% - 32px - 32px);
         }
 
         .button-wrapper {
-            width: 12%;
+            float: right;
+            display: inline-block;
+            width: 32px;
         }
 
         .card-body {