JSFiddle - React, Tailwind, and code Playground

by Sukrit Chhabra

HTML

<div class="whole">
  <div class="left">
    <img src="images/pic.png" width="120" height="120" />
  </div>
  <div class="right">
    <ul>
      <li>x1</li>
      <li>y1</li>
    </ul>
    <ul>
      <li>x2</li>
      <li>y2</li>
    </ul>
    <ul>
      <li>x3</li>
      <li>y3</li>
    </ul>
    <ul>
      <li>x4</li>
      <li>y4</li>
    </ul>
  </div>
</div>

CSS

div.whole {
  width: 620px;
  overflow: auto;
  border: 2px solid red;
}
div.left,
div.right {
  text-align: center;
  float: left;
  width: 300px;
  height: 200px;
  border: 2px solid black;
}
li {
  list-style: none;
  margin: 0 0;
  padding 0 0 0 0;
  display: inline-block;
  border-bottom: 1px dashed black;
  width: 100px;
}