Сверстать список заказов в личном кабинете Интернет-магазина

На действующем интернет магазине необходимо сверстать новый список заказов в личном кабинете.

Макет в figme https://www.figma.com/file/zV3dVLEkKOXjrafLjS8iI3/studentsbook.net?node-id=0%3A1

правые 4 блока это то, что должно быть в итоге

Прошу обратить внимание, что при нажатии на блок он должен разворачиваться со списком товаров. А если нажать именно на номер заказа - это будет ссылка на подробную информацию о заказе (можно поставить любую)

Шапку, футер - верстать не нужно, только сам блок со списком заказов.

Также нужно учесть что это будет блок на рабочем проекте) поэтому намекну что нельзя подключать ничего стороннего типа bootstrap или normalize и так далее, и не использовать css стили типа "звездочки", и "частоиспользуемые классы" (типа .btn).

В общем надеюсь идея понятна, что ничего не должно пересечься с возможными стилями и скриптами на проекте, и не перебить их в дальнейшем

Использование jquery возможно

От вас : html страница css и js файл.

Можно зайти в личный кабинет с тестовыми заказами на данном сайте и посмотреть как это выглядит сейчас. Может что-то захотите взять оттуда

Ссылку и доступы скину в личку