Szerokość <li> a długość tekstu

Question

Witam. Mam taki kod:

<div class="relative">
    <div class="gui" #IaddClass>
      <header>Kreator klas</header>
      <hr />
      <input type="text" placeholder="Nazwa klasy, np. 8c" />

      <input type="text" placeholder="Nazwa przedmiotu" />
      <button (click)="addSubject('dupa')">Dodaj przedmiot</button>
      <br />
      <br />
      <ul *ngFor="let subject of subjectsToAdd" id="subjects_list">
        <li class="subj"><b>{{subject}}</b></li>
      </ul>
    </div>

    <div class="gui" #IremoveClass>
      <header>Destruktor klas</header>
      <hr />
    </div>
  </div>

A w CSS'ie:

.relative {
  position: relative;
}

.gui {
  position: absolute;
  background: #ffffff;
  width: 732px;
  height: 266.666666667px;
  border: 2px solid #636363;
  border-radius: 0px 100px 0px 100px;
  box-shadow: -30px 30px 30px #000000;
  opacity: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-75%);
  transition: opacity 2s;
  z-index: -10;
  word-break: break-all;
}

.subj {
  text-align: left;
  background-color: red;
}

Wygląda to tak:

A chciałbym, żeby elementy <li> były obok siebie. Nie mam pojęcia jak tego dokonać, display inline lub inline-block w .subj nie działa. Dzięki za pomoc.