How can I achieve aligned word wrap with image inline?

Is it possible to create responsive layout and have word wrap properly set to avoid these ugly line breaks that I have now?

Photo is SPAN element with background image but I'd accept any element that could have background image.

The only thing I want to keep is UL and LIs for subcategories. Everything else could be any of suitable HTML elements.

.MainCategories {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.MainCategories>li {
  display: inline-block;
  max-width: 837px;
  max-width: 650px;
  vertical-align: top;
  margin: 20px;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(167, 204, 63, 0.5);
}

.MainCategories>li>div.CatHead {
  white-space: nowrap;
}

.MainCategories>li>div.CatHead>a.PhotoFrame .Photo {
  display: inline-block;
  width: 100px;
  height: 75px;
  margin-right: 20px;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  border: 1px solid #ddd;
  vertical-align: middle;
  background-size: 100px 75px;
}

.MainCategories>li>div.CatHead>a.PhotoFrame:hover .Photo {
  opacity: 0.5;
}

.MainCategories>li>div.CatHead>a.ParentCat {
  vertical-align: middle;
  font-size: xx-large;
  color: #888;
  white-space: normal;
}

.MainCategories>li>div.CatHead>a.ParentCat:hover {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.MainCategories>li>ul {
  list-style: none;
  margin-top: 20px;
}

.MainCategories>li>ul>li {
  display: inline-block;
  padding: 5px 0;
  vertical-align: middle;
}

.MainCategories>li>ul>li:before {
  display: inline-block;
  padding: 0 10px;
  vertical-align: bottom;
  line-height: 60%;
  content: "•";
  font-size: xx-large;
  color: #888;
}

.MainCategories>li>ul>li:first-child:before {
  content: "";
  padding: 0;
  font-size: 0;
  line-height: 0;
}

.MainCategories>li>ul>li>a {
  font-size: large;
  text-underline-offset: 3px;
}

<ul class="MainCategories">

  <li>
    <div class="CatHead">
      <a class="PhotoFrame" href="/en-us/categories/food"><span class="Photo" style="background-image:url(https://thevegcat.com/img/86460ca1-f14b-44ec-a96a-1aa47a3e39e8/small)"></span></a>
      <a class="ParentCat" href="/en-us/categories/food">Food (additional words to break)</a>
    </div>

    <ul>
      <li><a href="/en-us/categories/food/sweets">Sweets</a></li>
      <li><a href="/en-us/categories/food/sauces-spices">Sauces &amp; Spices</a></li>
      <li><a href="/en-us/categories/food/snacks-nibbles">Snacks &amp; Nibbles</a></li>
      <li><a href="/en-us/categories/food/ready-made-meals">Ready-made meals</a></li>
      <li><a href="/en-us/categories/food/spreads">Spreads</a></li>
      <li><a href="/en-us/categories/food/milk-cream-yoghurt">Milk, cream, yoghurt</a></li>
      <li><a href="/en-us/categories/food/semi-prepared-meals-and-mixtures">Semi-prepared meals and mixtures</a></li>
      <li><a href="/en-us/categories/food/bread-and-bakery-products">Bread and bakery products</a></li>
      <li><a href="/en-us/categories/food/cereal-flakes">Cereal Flakes</a></li>
      <li><a href="/en-us/categories/food/beverage">Beverage</a></li>
      <li><a href="/en-us/categories/food/baby-food">Baby Food</a>
      </li>
    </ul>
  </li>
</ul>

This is what I have now

This is what I want

Solution

Seems like this is a one-liner.

More on flexbox

.MainCategories {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  max-width: 300px; /* demo only */
}

.MainCategories>li {
  display: inline-block;
  max-width: 837px;
  max-width: 650px;
  vertical-align: top;
  margin: 20px;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(167, 204, 63, 0.5);
}

.MainCategories>li>div.CatHead {
  display: flex; /* <---------------------------- HERE */
}

.MainCategories>li>div.CatHead>a.PhotoFrame .Photo {
  display: inline-block;
  width: 100px;
  height: 75px;
  margin-right: 20px;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  border: 1px solid #ddd;
  vertical-align: middle;
  background-size: 100px 75px;
}

.MainCategories>li>div.CatHead>a.PhotoFrame:hover .Photo {
  opacity: 0.5;
}

.MainCategories>li>div.CatHead>a.ParentCat {
  vertical-align: middle;
  font-size: xx-large;
  color: #888;
  white-space: normal;
}

.MainCategories>li>div.CatHead>a.ParentCat:hover {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.MainCategories>li>ul {
  list-style: none;
  margin-top: 20px;
}

.MainCategories>li>ul>li {
  display: inline-block;
  padding: 5px 0;
  vertical-align: middle;
}

.MainCategories>li>ul>li:before {
  display: inline-block;
  padding: 0 10px;
  vertical-align: bottom;
  line-height: 60%;
  content: "•";
  font-size: xx-large;
  color: #888;
}

.MainCategories>li>ul>li:first-child:before {
  content: "";
  padding: 0;
  font-size: 0;
  line-height: 0;
}

.MainCategories>li>ul>li>a {
  font-size: large;
  text-underline-offset: 3px;
}

<ul class="MainCategories">

  <li>
    <div class="CatHead">
      <a class="PhotoFrame" href="/en-us/categories/food"><span class="Photo" style="background-image:url(https://thevegcat.com/img/86460ca1-f14b-44ec-a96a-1aa47a3e39e8/small)"></span></a>
      <a class="ParentCat" href="/en-us/categories/food">Food (additional words to break)</a>
    </div>

    <ul>
      <li><a href="/en-us/categories/food/sweets">Sweets</a></li>
      <li><a href="/en-us/categories/food/sauces-spices">Sauces &amp; Spices</a></li>
      <li><a href="/en-us/categories/food/snacks-nibbles">Snacks &amp; Nibbles</a></li>
      <li><a href="/en-us/categories/food/ready-made-meals">Ready-made meals</a></li>
      <li><a href="/en-us/categories/food/spreads">Spreads</a></li>
      <li><a href="/en-us/categories/food/milk-cream-yoghurt">Milk, cream, yoghurt</a></li>
      <li><a href="/en-us/categories/food/semi-prepared-meals-and-mixtures">Semi-prepared meals and mixtures</a></li>
      <li><a href="/en-us/categories/food/bread-and-bakery-products">Bread and bakery products</a></li>
      <li><a href="/en-us/categories/food/cereal-flakes">Cereal Flakes</a></li>
      <li><a href="/en-us/categories/food/beverage">Beverage</a></li>
      <li><a href="/en-us/categories/food/baby-food">Baby Food</a>
      </li>
    </ul>
  </li>
</ul>