Middle cropping keep extension

by bebug

HTML

<div id=wrapper>

  <div class="fileName">
    <p>This is a short filename<span class="extension"><span>.txt</span></span></p>
  </div>

  <div class="fileName">
    <p>This is a laaaaaaaaaaaaaaaaaaaaaaaaaaarger filename<span class="extension"><span>.txt</span></span></p>
  </div>

</div>

CSS

.fileName {
  position: relative;
  padding-right: 30px;
  display: flex;
}

.fileName p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
}

.extension {
  position: absolute;
  right: 0;
}

.extension span {
  position: fixed;
}

#wrapper {
  border: 1px solid black;
  width: 250px;
  margin: 10px;
  padding: 5px;
}