JSFiddle - React, Tailwind, and code Playground

side grip css

by Christopher O

HTML

<div id="one" class="bigrect"><span class="grippy"></span>Is this the real life?
Is this just fantasy?
Caught in a landslide,
No escape from reality.

Open your eyes,
Look up to the skies and see,
I'm just a poor boy, I need no sympathy,
Because I'm easy come, easy go,
Little high, little low,
Any way the wind blows doesn't really matter to me, to me.

So you think you can stone me and spit in my eye?
So you think you can love me and leave me to die?
Oh, baby, can't do this to me, baby,
Just gotta get out, just gotta get right outta here.

(Ooooh, ooh yeah, ooh yeah)

Nothing really matters,
Anyone can see,
Nothing really matters,
Nothing really matters to me.

Any way the wind blows.
</div>
<div id="two" class="bigrect">I see a little silhouetto of a man,
Scaramouche, Scaramouche, will you do the Fandango?
Thunderbolt and lightning,
Very, very frightening me.
(Galileo) Galileo.
(Galileo) Galileo,
Galileo Figaro
Magnifico-o-o-o-o.

I'm just a poor boy, nobody loves me.
He's just a poor boy from a poor family,
Spare him his life from this monstrosity.

Easy come, easy go, will you let me go?
Bismillah! No, we will not let you go. (Let him go!)
Bismillah! We will not let you go. (Let him go!)
Bismillah! We will not let you go. (Let me go!)
Will not let you go. (Let me go!)</div>

CSS

.bigrect{
  width:30%;
  float:left;
  border:1px dashed #ddd;
  padding:15px;
  position: relative;
}

#one span.grippy {
    position:absolute; /* parent must have "position: relative" hardset; */
    top:10px;
    right:-8px;
}

span.grippy {
  /*content: '....';*/
  width: 10px;
  height: 20px;
  display: inline-block;
  overflow: hidden;
  /*line-height: 5px;*/
  line-height: 12px;
  padding: 4px 4px 10px 4px;
  cursor: move;
  vertical-align: middle;
  margin-top: -.7em;
  margin-right: .3em;
  font-size: 12px;
  font-family: sans-serif;
  letter-spacing: 2px;
  color: #ccc;
  text-shadow: 1px 0 1px black;
  font-weight:bold;
  
  border: 1px solid #ccc;
  border-right: none !important;
  background-color: #f1f1f1;
  border-radius: 10px 0 0 10px;
}
span.grippy::after {
  /* content: '.. .. .. ..';*/
  content: '< <';
}
span.grippy:hover {
  color: #f1f1f1;
  background-color: #ccc;
  border: 1px solid #000;
}