JSFiddle - React, Tailwind, and code Playground

by godsnake

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container parent">

<div class="child">
<div class="child2">

<h3 class="title">
ddddddddd dddddddddd ddddddddd ddddddddddddddddd
</h3>
<ol class="circlegroup">
<li>1 I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dddddd</li>
<li>2 I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dddddd</li>
<li>3 I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dd dddd</li>
<li>4 I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dddddssddddddddddddddddddddd</li>
<li>5 I want to center the parent but align this to the left ddddddddddd dddddd dddddd dddd dddddd</li>
</ol>
</div>
</div>

</div>

CSS

html, body {
  padding:0; margin:0;
  min-height: 100% !important;
  height: 100% !important;
}

.parent {background:yellow; width:100%; height:100%;  display: table;
}

.child {background:red; width:70%;  display: table-cell;
    vertical-align: middle;}
    
    .child2 {background:#fff; width:100%; display:inline-block;
    vertical-align: middle;}
    
    .circlegroup {  }
    
 .circlegroup li {
   list-style:none;
  width:auto; margin-left:10%;
  height: auto;
  border: 1px solid #d3d3d3;
  word-wrap: break-word;

  margin-bottom:40px;
}

.title {margin-left:10%;}


ol { list-style: none; padding-left: 10px; text-indent:0px; margin-left:5px; }

ol li {color:#666; }

ol li:first-letter {color:#fff; background:#333; border-radius:50%; border: 5px solid #333;font-size:4vw;   vertical-align:middle;
  behavior: url(PIE.htc);padding-left:2%; padding-right:2%; padding-top:0%; padding-bottom:0%; font-weight:bold; margin-right:1vw; height:100%;  list-style-position:outside;}
  

ol li 
{ list-style-position:outside;

}