JSFiddle - React, Tailwind, and code Playground

by Yi Xin Ang

HTML

<div class="work-meta-row">
            <div class="work-meta-label">
              Platform
            </div>
            <div class="work-meta-value">
              iOS, Android
            </div>
          </div>
          <div class="work-meta-row">
            <div class="work-meta-label">
              Year
            </div>
            <div class="work-meta-value">
              2017
            </div>
          </div>
          <div class="work-meta-row">
            <div class="work-meta-label">
              Role
            </div>
            <div class="work-meta-value">
              Lead Designer. User Research, Prototyping, Wireframing, User Testing, User Interface Design, Product Strategy, Product Management, Lorem Ipsum 1, Lorem Ipsum 2
            </div>
          </div>

SCSS

.work-meta-row{
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          align-self: flex-start;
          justify-content: flex-start;
          line-height: 22px;
          flex-wrap: nowrap;
          .work-meta-label{
            font-weight: bold;
            flex-basis: 200px;
          }
          .work-meta-value{
            flex-grow:1;
          }
        }