Div don't shrink more than paragraph pushed by another Div

Question

I'm new and I try to make a check card without JS, but i wan't to shrink the name of the dish when it's too long for the card with dots, but all I can make it's the div don't want to be smaller and my animate div stay small...

I want to get my animate div pushing by the right side and hide the dish's extra name with dots..

I made a codepen with : https://codepen.io/steven-fabre/pen/NWbowdO

Thanks by advance, you will be my hero !

I did an awful paint to show what i want when it's checked :

input {
  display: none;
}

.dish-card {
  display: flex;
  background: white;
  border-radius: 20px;
  height: 70px;
  width: 337.5px;
  margin-bottom: 13px;
  background: red;
}

.add-dish {
  display: flex;
  position: initial;
  top: initial;
  left: initial;
  width: 100%;
}

.add-dish span {
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 15px;
  align-self: flex-end;
  margin-right: 30px;
}

.dish-card-description {
  display: flex;
  align-items: center;
  padding: 0 0 0 10px;
  width: 100%;
  max-width: 315px;
  justify-content: space-between;
}

.dish-name {
  display: flex;
  flex-direction: column;
  flex-shrink: 3;
  padding: 3px;
  max-width: 100%;
  min-width: 50px;
  align-self: center;
  flex-wrap: wrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dish-name h2 {
  font-size: 18px;
  flex-wrap: wrap;
  margin: 0;
}

.dish-name p {
  font-size: 17px;
  flex-wrap: wrap;
  margin: 0;
}

.dish-check {
  display: flex;
  box-sizing: content-box;
  border-radius: 0 20px 20px 0;
  width: 0;
  margin-left: 10px;
  justify-content: center;
  align-items: center;
  transition: linear 0.2s;
}

.fa-check {
  visibility: hidden;
  font-size: 13px;
  background-color: green;
  border-radius: 50px;
  padding: 3px;
  color: red;
}

input:checked~.dish-name {
  width: 170px !important;
  background-color: yellow;
  transition: linear 0.2s;
}

input:checked~.dish-check {
  width: 70px;
  transform: scale(1);
  background-color: pink;
  transition: linear 0.2s;
}

input:checked~.dish-check .fa-check {
  animation: visibility 0.5s forwards 0.2s;
}

@keyframes visibility {
  from {
    transform: rotate(-180deg);
  }
  to {
    visibility: visible;
    transform: rotate(0);
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">


<div class="dish-card">
  <label class="add-dish">
    <input type="checkbox">
    <div class="dish-card-description">
      <div class="dish-name">
        <h2>Coquilles Saint-Jacques</h2>
        <p>Accompagnées d'une purée de panais</p>
      </div>
      <span>40€</span>
    </div>
    <div class="dish-check">
      <i class="fas fa-check"></i>
    </div>
  </label>
</div>

Answer 1

I didnt quite understand what you meant by animating.

However, the elipsis should be easy, but make sure to follow the rules: CSS text-overflow: ellipsis; not working?

This is the result I ended up with

or

By adding this scss:

.dish-card {
  .dish-name h2{
  height: 18px;
  width: 100px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  }
}

---

EDIT

I am assuming this is what you want:

But you also want the elipsis to be dynamic..

I am not going to give you the entire solution, but here is what you need to do:

use javascript to adjust the width of the text in pixels whenever the checkbox is clicked.

here is the code:

.dish-card {
  position: relative;
  .dish-name p{
  height: 18px;
  width: 250px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  }
}

input{
  appearance: none;
  &:before {
    position: absolute;
    display: block;
    content: '';
    opacity: 0;
    border-radius: 20px;
    height: 70px;
    width: 337.5px;
    top: 0;
    left: 0;
  }
}

remove input {display: none;}