How to align in a tag that lies next to another tag?

Question

css

I sketched a problematic piece on fiddle:
https://jsfiddle.net/bv5fLrth/2/
The essence of the problem:
1) A large description of the picture climbs out of bounds and shifts to the next line. I would like the whole inscription to be aligned to the left, as it is done, for example here: prntscr.com/9jh3jl
2) And the second problem: after I set

.class__li {width: 180px;}

, all tags are not aligned on the same line.
My knowledge in layout is quite minimal and I need the help of experts. Can anyone help?

Answer 1

.class__li a{
  display: inline-block;
  vertical-align: middle;
}
.class__li a:last-child{
  width: 70%;
}