JSFiddle - React, Tailwind, and code Playground

by elizabethkmathew

HTML

<div class="main-row">
    <div class="left-col">
        <div class="grid">
            <span class="grid-label">SiteName</span>
            <span class="grid-value">site 1</span>
        </div>
        <div class="grid">
            <span class="grid-label">Address</span>
            <span class="grid-value">Addresse 1</span>
        </div>
        <div class="grid">
            <span class="grid-label">SiteName</span>
            <span class="grid-value">site 1</span>
        </div>
    </div>
    <div class="right-col">
        <div class="grid">
            <span class="grid-label">SiteName</span>
            <span class="grid-value">site 1</span>
        </div>
        <div class="grid">
            <span class="grid-label">SiteName</span>
            <span class="grid-value">site 1</span>
        </div>
    </div>
</div>

CSS

.main-row {
  display: flex;
}
.main-row > div {
  width: 50%;
}
.grid {
  display: flex;
}
.grid-label {
  width: 100px;
  margin-right: 10px;
}