I have a list where some words span two lines, but the second line jumps under the icons at the bottom. How can I keep both lines next to the icon? I'm using Bootstrap and chose to use the list-inline class. Maybe using columns for this list would work, or what would be the best way to fix this list?
This is how I need it to look:
https://i.sstatic.net/yeNMp.png
.container {
padding: 15px 40px;
border-radius: 6px;
border: solid 1px #e5e5e5;
background-color: #ffffff;
font-size: 16px;
line-height: normal;
color: #333333;
}
.list-inline {
margin: 0;
}
.icon-europe {
width: 24px;
height: 24px;
background-image: url("https://i.ibb.co/xhRsmPz/europe.png");
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
margin-right: 4px;
}
.icon-warranty {
width: 24px;
height: 24px;
background-image: url("https://i.ibb.co/VLy7ssd/warranty.png");
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
margin-right: 4px;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Inline list</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li class="list-inline-item"><span class="icon-europe"></span> Working all across<br> Europe
</li>
<li class="list-inline-item"><span class="icon-warranty"></span> 2-year warranty
</li>
</ul>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f1eef1f1e4f3afebf2c1b0afb0b7afb1">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>