diff --git a/Resources/Private/Components/Organism/StyleguideToolbar/StyleguideToolbar.html b/Resources/Private/Components/Organism/StyleguideToolbar/StyleguideToolbar.html
index d10bd4c..f6c080f 100644
--- a/Resources/Private/Components/Organism/StyleguideToolbar/StyleguideToolbar.html
+++ b/Resources/Private/Components/Organism/StyleguideToolbar/StyleguideToolbar.html
@@ -54,7 +54,7 @@
 
                     <div class="tabContents">
                         <f:if condition="{componentData.arguments} || ({showDocumentation} && {componentData.documentation})">
-                            <div class="tabContent active">
+                            <div class="tabContent documentation active">
                                 <h1>{componentData.name.displayName}</h1>
                                 <f:if condition="{componentData.arguments}">
                                     <div class="boxMargin">
diff --git a/Resources/Private/Components/Organism/StyleguideToolbar/StyleguideToolbar.js b/Resources/Private/Components/Organism/StyleguideToolbar/StyleguideToolbar.js
index 4868823..80962ad 100644
--- a/Resources/Private/Components/Organism/StyleguideToolbar/StyleguideToolbar.js
+++ b/Resources/Private/Components/Organism/StyleguideToolbar/StyleguideToolbar.js
@@ -41,6 +41,17 @@ const StyleguideToolbar = el => {
             });
         })
     });
+
+    const docTab = document.querySelector('.documentation')
+    const docTabInner = document.querySelector('.documentation .boxMargin')
+    const docHeight = parseFloat(window.getComputedStyle(docTabInner, null).getPropertyValue("height")) + 30
+    if (docHeight > 500 && docHeight < 600) {
+        docTab.classList.add('maxHeight500')
+    } else if (docHeight > 600 && docHeight < 700) {
+        docTab.classList.add('maxHeight600')
+    } else if (docHeight > 700 && docHeight < 800) {
+        docTab.classList.add('maxHeight700');
+    }
 };
 
 register('StyleguideToolbar', StyleguideToolbar);
diff --git a/Resources/Private/Components/Organism/StyleguideToolbar/StyleguideToolbar.scss b/Resources/Private/Components/Organism/StyleguideToolbar/StyleguideToolbar.scss
index 2dbb0a1..99fd8d6 100644
--- a/Resources/Private/Components/Organism/StyleguideToolbar/StyleguideToolbar.scss
+++ b/Resources/Private/Components/Organism/StyleguideToolbar/StyleguideToolbar.scss
@@ -86,6 +86,36 @@
         .toolbarBot {
             top: -16px;
         }
+
+        @media (min-width: 992px) {
+            .tabContent {
+                &.documentation {
+                    &.maxHeight500 {
+                        max-height: 500px;
+                    }
+
+                    &.maxHeight600 {
+                        max-height: 600px;
+                    }
+
+                    &.maxHeight700 {
+                        max-height: 700px;
+                    }
+
+                    .boxMargin {
+                        width: 50%;
+                        display: inline-block;
+                        vertical-align: top;
+                    }
+
+                    .componentDocumentation {
+                        width: 45%;
+                        display: inline-block;
+                        padding-left: 15px;
+                    }
+                }
+            }
+        }
     }
 
     .toolbarTabs {
@@ -232,7 +262,6 @@
 
     .componentDocumentation {
         line-height: 1.8;
-        max-width: 70em;
 
         pre, code {
             background: $dark-grey-1;