JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<div class="column">
  <div class="col-start">
    <ul>
      <li>l1</li>
      <li>le 2</li>
      <li>et de 3</li>
    </ul>
  </div>
  <div class="col-end">
    <ul>
    <li><a href=""><i class="icon"></i><span>fin 1</span></a></li>
    <li><a href=""><i class="icon"></i><span>le milieu</span></a></li>
    <li><a href=""><i class="icon"></i><span>déconnexion</span></a></li>
    </ul>
  </div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
}
.column, .col-start, .col-end {
  display: flex;
  flex-direction: column;
}
.column {
  min-height: 100vh;
}
.col-start {
  margin-bottom: auto;
  
}
.col-end {
  margin-top: auto;
  overflow: hidden;
}
li {
  display: flex;
  list-style: none;
  border: 1px solid #ccc;
  line-height: 1.8rem;
}
li a {
  width: 100%;
  padding: 0.35rem 0.5rem;
}
li:nth-child(3) {
  background: #bcd;
}
li span {
  background-color: red;
}