.replica {
  border-width: 1px 1px 1px 1em
}

.replica-text {
  white-space: pre-wrap;
}

.replica-hidden {
  filter: blur(3px);
}


.character {
  margin: 0.3em;
  padding: 0.3em;
  border-width: 1px 1em 1px 1px;
  border-style: solid;
}

#characters {
  list-style: none
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
  <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
  <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
<body>
  <div class="container">
    <div class="columns">
      <h1 class="column col-12">Автор - Название</h1>
    </div>
    <div class="columns">
        <div class="column col-3">
          <ul id="characters">
            <li class="character" style="border-color: black;">
              <label class="form-checkbox form-inline">
                <input type="checkbox" name="gender"><i class="form-icon"></i>
                Narrator - <i>W</i>
              </label>  
            </li>
            <li class="character" style="border-color: blue;">
              <label class="form-checkbox form-inline">
                <input type="checkbox" name="gender"><i class="form-icon"></i>
                Main chairman - <i>Kerrigan</i>
              </label>  
            </li>
             <li class="character" style="border-color: red;">
              <label class="form-checkbox form-inline">
                <input type="checkbox" name="gender"><i class="form-icon"></i>
                Retif - <i>Songare</i>
              </label>  
            </li>
          </ul>
        </div>
        <div class="column col-9">
          <div class="container">
          <div class="columns">
            <div class="card replica column col-12" style="border-color: black">
              <div class="card-header">
                <div class="card-title h5">Narrator - <i>W</i></div>
              </div>
              <div class="card-body replica-text">
                Запечатанные инструкции

  «…перед лицом многочисленных событий угрожающих миру и спокойствию, которые вполне естественно возникали в сложной Галактической ситуации, безупречные способы, отработанные теоретиками Дипломатического Корпуса, доказали свою бесценность в тысячах наисложнейших ситуаций. Даже безвестные младшие сотрудники Корпуса, пользующиеся вместо оружия обычными портфелями, содержащими детальные инструкции, были в состоянии успокоить любые волнения с искусством опытных дипломатов. В данном случае речь идет о том, как благодаря этим инструкциям, консул Пассвин великолепно уладил отношения между землянами и джеками на планете Адоуб».

  Том NII, пленка N91. 480 б.э.

  (2941 год от рождества Христова).
              </div>
             </div>
          </div>
          
          
          <div class="columns">
            <div class="card replica column col-12" style="border-color: red">
              <div class="card-header">
                <div class="card-title h5">Retif - <i>Songare</i></div>
              </div>
              <div class="card-body replica-text">
  — Это верно, — сказал Консул Пассвин, — что я просил назначить меня старшим офицером какого-нибудь небольшого поста. Но я имел в виду один из этих очаровательных курортных миров, где лишь изредка возникают проблемы с визами или раз-другой за год возникают недоразумения со звездоплавателями. Вместо этого, я здесь сижу, как директор зоопарка для этих проклятых поселенцев, причем не с одной планеты, прошу обратить внимание, а с восьми.
              </div>
            </div>
          </div>
            
            
          
          <div class="columns">
            <div class="card replica replica-hidden column col-12" style="border-color: blue">
              <div class="card-header">
                <div class="card-title h5">Main Chairman - <i>Kerrigan</i></div>
              </div>
              <div class="card-body replica-text">
  — Это верно, — сказал Консул Пассвин, — что я просил назначить меня старшим офицером какого-нибудь небольшого поста. Но я имел в виду один из этих очаровательных курортных миров, где лишь изредка возникают проблемы с визами или раз-другой за год возникают недоразумения со звездоплавателями. Вместо этого, я здесь сижу, как директор зоопарка для этих проклятых поселенцев, причем не с одной планеты, прошу обратить внимание, а с восьми.
              </div>
            </div>
          </div>
          
          <!--
          <div class="empty">
            <div class="empty-icon">
              <i class="icon icon-people"></i>
            </div>
            <p class="empty-title h5">No replicas yet</p>
            <p class="empty-subtitle">Enter scenario and mark characters.</p>
            <div class="empty-action">
              <button class="btn btn-primary">Edit scenario</button>
            </div>
          </div>
          -->
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Изменить пасту