title: How to add text to the sliding doors?
body: <p>Here was my attempt: <a href="https://jsfiddle.net/p872350m/1/" rel="nofollow noreferrer">https://jsfiddle.net/p872350m/1/</a></p>
  <p>I am trying to add text to the sliding curtain doors, how exactly do I do that?</p>
  <p>The text is supposed to flow or slide with the curtains and it does not.</p>
  <p>so that the text stays attached to the sliding doors.</p>
  <p>I did something, or some things wrong or incorrectly.</p>
  <p>How would that be done?</p>
  <p>I tried doing it here but what I did does not work, or is not working.</p>
  <p>The first issue I noticed is that the text does not stay in the middle, when the window gets bigger and smaller.</p>
  <p>The second issue is that the text does not split apart with the sliding doors.</p>
  <p>Would I need to attach half the text to one door, then then the other half to the other?</p>
  <pre><code>.panel-left p {
    position: absolute;
    z-index: 0;
    width: 640px;
    height: 340px;
    top: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: right;
    text-align: right;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #00B0FE;
    box-sizing: border-box;
    /*padding:15px;*/
  }
  
  .panel-left p::after {
    content: &quot;&quot;;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    /*background: black;*/
    z-index: -1;
    width:640px;
    height:360px;
  }
  
  .panel-right p {
    position: absolute;
    z-index: 0;
    width: 640px;
    height: 340px;
    top: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: left;
    font-family: 'Roboto', sansleftserif;
    font-size: 12px;
    color: #00B0FE;
    box-sizing: border-box;
    /*padding:15px;*/
  }
  
  .panel-right p::after {
    content: &quot;&quot;;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    /*background: black;*/
    z-index: -1;
    width:640px;
    height:360px;
  }
  
  &lt;div class=&quot;panel-left&quot;&gt;
          &lt;p&gt;added text to&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;panel-right&quot;&gt;
          &lt;p&gt;the curtain player.&lt;/p&gt;
        &lt;/div&gt;
  </code></pre>