JSFiddle - React, Tailwind, and code Playground

by iBertel

HTML

<div class="page-content">
  <div class="popup">
    <div class="popup-image">
      <h2>
                    Thumbnail
                    </h2>
      <img src="http://www.placehold.it/300x180">
    </div>
    <div class="popup-info">
      <h2>
                    File information
                    </h2>
      <ul>
        <li>
          <span>Filename</span>
          <span>House-villa.jpg</span>
        </li>
        <li>
          <span>File date</span>
          <span>21.02.2017 - 14:29</span>
        </li>
        <li>
          <span>File size</span>
          <span>512 kb</span>
        </li>
        <li>
          <span>File size</span>
          <span>512 kb</span>
        </li>
      </ul>
    </div>

  </div>

SCSS

/*GENERAL STYLES*/

body {
  font-family: 'open-sans', sans-serif;
  padding: 20px;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}


/*POPUP STYLES*/

.popup {
  overflow: hidden;
  padding: 20px;
  background-color: #F8F8F8;
  position: relative;
  display: inline-block;
  box-shadow: 0px 0px 5px #ccc;
  &:after {
    content: "";
    width: 1px;
    background-color: #efefef;
    height: 100%;
    position: absolute;
    top: 0;
    right: 50%;
  }
}

.popup-info,
.popup-image {
  float: left;
  position: relative;
  z-index: 100;
  width: 50%;
  h2 {
    font-weight: normal;
    font-size: 16px;
    color: #666;
    margin: 0 0 20px 0;
  }
}

.popup-image {
  padding-right: 20px;
  img {
    display: block;
    width: 100%;
    box-shadow: 0px 0px 5px #ccc;
  }
}

.popup-info {
  padding-left: 20px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  li {
    position: relative;
    width: 100%;
    overflow: hidden;
    &:after {
      content: "";
      position: absolute;
      top: 13px;
      left: 0;
      width: 100%;
      border-bottom: 1px dotted #000;
      z-index: -1;
    }
    span {
      background-color: #F8F8F8;
      height: 20px;
      font-size: 13px;
      &:first-of-type {
        float: left;
        padding-right: 10px;
      }
      &:last-of-type {
        float: right;
        padding-left: 10px;
      }
    }
  }
}