How to align an icon to the bottom right corner?

Question

Computer networks

how to make such a card? I tried, it seems, already all the options with position and align. I was able to align horizontally using float, but it doesn’t work vertically. Tell me how to do it. Well, in addition, tell me how it would be better to implement the lower block with the date

<div class="d-flex"> //обертка для блоков, которых тут нет
            <div class="honey-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem corporis debitis eos ex in magnam
                    neque repudiandae saepe. Architecto cupiditate debitis ducimus ea eos laboriosam mollitia nesciunt
                    nostrum sequi, voluptatibus.</p>
                <i class="bi bi-plus"></i>
            </div>
</div>

Answer 1

mini-server on Windows 10 (otherwise the modem on Linux is unstable)

damn, what a mess! I'm crying.
take ZyXEL which is now Keenetic and connect unfortunate three cameras. He will eat the modem right away, you can turn on DHCP and then fix the addresses so that they do not change easily in the interface. In the same place, the dyndns service, in order to climb onto the router named my_ip_camera_router.dyndns_domain.org,
wanted to offer Mikrotik and raise vpn in order to go to the internal address: but younger models do not support USB modems.

mini server on Windows 10...

Answer 2

For DHCP I use this dhcpserver.sourceforge.net
Simple as an axe. All examples are in the config. You can assign fixed settings by MAC addresses.
If you need to reach the cameras from the outside, then you need another node, because your miniserver finds it behind the provider's NAT if you didn't buy a dedicated white IP address for it. (I xs, does MTS have such a service at all).
You can set up an OpenVPN server somewhere, set up a connection to it from the miniserver and from your machine, and get access to the object's internal network.

Answer 3

Based on the photo, this is a standard card, with the same standard elements:

.card
  .card__date
  .card__image
  .card__info
    .card__icon

1. Make the card a flex container.
   
2. The date, through the order, is sent to the end of the rendering.
   
3. Info, send to the beginning.
   
4. Two large elements, set the desired dimensions and flex grow.
   
5. The date, thanks to the flex, will adjust itself.
   
6. The icon is absolutely positioned relative to the info element.
   

Something like this

<div class="card">
  <div class="card__date"><span class="card__day">25</span> april</div>
  <picture class="card__picture">
    <img class="card__image" src="https://unsplash.it/1000/300" alt="">
  </picture>
  <div class="card__info">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sequi enim quia, voluptatibus laborum atque magnam sapiente sint expedita quas! Similique aspernatur quod optio quasi ducimus tempora commodi, maxime vel!</p>
    <button class="card__btn">+</button>
  </div>
</div>

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.card {
  display: flex;
  flex-wrap: wrap;
}
.card__date {
  order: 1;
  background-color: yellow;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card__day {
  font-size: 30px;
}
.card__info {
  order: -1;
  position: relative;
  padding: 20px;
}
.card__btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: none;
  border: 0;
  font-size: 30px;
}
.card__image {
  object-fit: cover;
  display: block;
}
.card__picture {
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.card__picture,
.card__info {
  flex-grow: 1;
  flex-basis: 50%;
  flex-shrink: 0;
  background-color: orange;
}