flexbox <HR> with text label

Make a HR with a text label overlapping it and aligned on the left, right or center with different hr styles

HTML

<h1>
FlexBox &lt;HR&gt; Tags with Overlapping Labels
</h1>
<p>
  This shows various alignments and HR styles you can use to overlay a label on top of a HR tag.
</p>
<h3>Select Divider Style</h3>
<button id="default" class="toggleButton active">Default</button>
<button class="toggleButton" id="gradient">Gradient 1</button>
<button class="toggleButton" id="gradient2">Gradient 2</button>
<button class="toggleButton" id="dashed">Dashed</button>
<button class="toggleButton" id="dropshadow">Drop Shadow</button>
<button class="toggleButton" id="blur">Blur</button>
<button class="toggleButton" id="inset">Inset</button>
<button class="toggleButton" id="flared">Flared</button>
<button class="toggleButton" id="double">Double</button>
<p>&nbsp;</p>

<h2>
Full Span Divider with Label Left
</h2>
<div class="divider left">
  <hr />
  <label>Welcome!</label>
</div>
<p align="center">
  <Button class="code" data-code="left">Show Code</Button>
  <div class="codeBlock" id="left">hello</div>
</p>
<p>&nbsp;</p>

<h2>
Full Span Divider with Label Right
</h2>
<div class="divider right">
  <hr />
  <label>Welcome!</label>
</div>
<p align="center">
  <Button class="code" data-code="right">Show Code</Button>
  <div class="codeBlock" id="right"></div>
</p>
<p>&nbsp;</p>

<h2>
Full Span Divider with Label Center
</h2>
<div class="divider center">
  <hr />
  <label>Welcome!</label>
  <hr />
</div>
<p align="center">
  <Button class="code" data-code="center">Show Code</Button>
  <div class="codeBlock" id="center"></div>
</p>
<p>&nbsp;</p>

<h2>
Fixed Width Divider with Label Left
</h2>
<div class="divider left fixed">
  <hr />
  <label>Welcome!</label>
</div>
<p align="center">
  <Button class="code" data-code="fixed-left">Show Code</Button>
  <div class="codeBlock" id="fixed-left"></div>
</p>
<p>&nbsp;</p>

<h2>
Fixed Width Divider with Label Right
</h2>
<div class="divider right fixed">
  <hr />
  <label>Welcome!</label>
</div>
<p align="center">
  <Button class="code"...

CSS

button {
    padding: 8px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #ccc;
    margin: 2px;
  }
  
  button:hover {
    cursor: pointer;
  }
  
  button.active {
    background-color: rgb(34, 179, 247);
    color: #fff;
  }
  
  .codeBlock {
    display: none;
  }
  
  .htmlCode, .cssCode {
    background-color: rgba(34, 179, 247, 0.5); 
    width: 100%;
    padding: 10px;
  }
  
  .divider {
    display: flex;
    flex-direction: row;
    flex-flow: row;
    width: 100%;
  }
  
  .divider.fixed {
    width: 400px;
  }
  
  .divider > label {
    align-self: baseline;
    flex-grow: 2;
    white-space: nowrap;
  }
  
  .divider > hr {
    margin-top: 10px;
    width: 100%;
    border: 0;
    height: 1px;
    background: #666;
  }
  
  .divider.left > label {
    order: 1;
    padding-right: 5px;
  }
  
  .divider.left > hr {
    order: 2
  }
  
  .divider.right > label {
    padding-left: 5px;
  }
  /* hr bars with centered text */
  /* first HR in a centered version */
  
  .divider.center >:first-child {
    margin-right: 5px;
  }
  /* second HR in a centered version */
  
  .divider.center >:last-child {
    margin-left: 5px;
  }
  /** HR style variations **/
  
  hr.gradient {
    background: transparent;
    background-image: linear-gradient(to right, #f00, #333, #f00);
  }
  
  hr.gradient2 {
    background: transparent;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  
  hr.dashed {
    background: transparent;
    border: 0;
    border-top: 1px dashed #666;
  }
  
  hr.dropshadow {
    background: transparent;
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
  }
  
  hr.blur {
    background: transparent;
    border: 0;
    height: 0;
    /* Firefox... */
    box-shadow: 0 0 10px 1px black;
  }
  
  hr.blur:after {
    background: transparent;
    /* Not really supposed to work, but does */
    content: "\00a0";
   ...

JavaScript

// Change the hr style and the active button
 $('.toggleButton').click(function() {
    const hrStyle = $(this).attr('id');
  
  	 $( "button" ).each(function( index ) {
      $(this).attr('class', 'toggleButton');
    });
    
    $('#' + hrStyle).addClass('active');
    
    $( "hr" ).each(function( index ) {
      $(this).attr('class', hrStyle);
    });
    
    $( ".codeBlock" ).each(function( index ) {
      $(this).css('display', 'none');
    });
  });
  
  // Show code when the button is clicked
 $('.code').click(function() {
 		const codeBlock = $(this).data('code');
    
    const currentDisplay = $('#' + codeBlock).css('display');
    
    const toggleDisplay = currentDisplay === 'none'
    	? 'block'
      : 'none';
      
    setCssValue(codeBlock);
    
    $('#' + codeBlock).css('display', toggleDisplay);
    
 });
 
 function activeDividerStyle() {
 	return $('.active').attr('id') != 'default'
  	? $('.active').attr('id')
    : '';
 }
 
 function setCssValue(codeBlock) {
  let position = '';
  let fixed = '';
  let extraHr = '';
  const dividerStyle = activeDividerStyle() ? '  class="' + activeDividerStyle() + '" ' : '';
  
  switch(codeBlock) {
  	case 'right':
    	position = ' right';
      break;
    case 'left':
   	  position = ' left';
      break;
    case 'center':
    	position = ' center';
      extraHr = '&lt;hr' + dividerStyle + '/&gt;';
      break;
    case 'fixed-right':
    	position = ' right';
      fixed = ' fixed';
      break;
    case 'fixed-left':
    	position = ' left';
      fixed = ' fixed';
      break;
    case 'fixed-center':
    	position = ' center';
      fixed = ' fixed';
      extraHr = '&lt;hr' + dividerStyle + '/&gt;';
      break;
  }
  
  const htmlCode = '<h4>HTML</h4><div class="htmlCode">&lt;div class="divider' + position + fixed + '"&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&lt;hr' + dividerStyle + ' /&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;Welcome!&lt;/label&gt;<br/>' + extraHr + '&lt;/div&gt;</div>';
  
 ...