JSFiddle - React, Tailwind, and code Playground

by Luis Martin

HTML

<div class="row">
  <div class="col1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col2">
<div class="triangle-right"></div>
  </div>
</div>

CSS

.row {
  display: flex; /* equal height of the children */
}

.col1 {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}
.col2 {
  flex: 0.15; /* additionally, equal width */
  

  border: solid;
}


  
  .triangle-right {
    width: 0;
    height: 0;
    padding-top: 45%;
    padding-bottom: 45%;
    padding-left: 45%;
    overflow: hidden;
}
.triangle-right:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-top:-500px;
    margin-left: -500px;
    
    border-top: 500px solid transparent;
    border-bottom: 500px solid transparent;
    border-left: 500px solid #4679BD;
}