<section class="example">
      <header class="example-header">
        <p class="example-name">
          <code class="example-value">font-size: medium;</code>
        </p>
        <div class="example-description">
          <p>У тексті буде використано середній розмір браузера за умовчанням.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div font-size " id="font-size-medium"><p>Hello world</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, iure.</p></div>
        </div>
      </aside>
          <style type="text/css">#font-size-medium{ font-size:medium;}</style>
    </section>
<section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-size: 20px;">font-size: 20px;</code>
        </p>
        <div class="example-description">
          <p>Ви можете використовувати значення пікселів.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div font-size " id="font-size-20px"><p>Hello world</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, consequuntur.</p></div>
        </div>
      </aside>
          <style type="text/css">#font-size-20px{ font-size:20px;}</style>
    </section>
.example {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 2rem 3rem 0;
}
.example-header {
    padding-right: 2rem;
    width: 60%;
}
.example-value {
    background: #ffdd57;
    border-radius: 2px;
    color: rgba(0,0,0,0.7);
    display: inline-block;
    padding: 0.1em 0.5em 0.15em;
    vertical-align: top;
    font-size: 20px;
}

.example-description {
    font-size: 0.9rem;
    margin-top: 0.5rem;
    font-size: 18px;
}
.example-output {
    border: 1px solid #e6e6e6;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.05);
    font-size: 0.8em;
    padding: 0.5em;
}
.example-preview {
    width: 40%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.