How can I properly align a crossmark and a checkmark with the text behind them? The checkmark looks aligned well, but the crossmark appears to be slightly off to the top-right. I'm hesitant to adjust margins and paddings as it may cause issues when the screen size changes. Is there a more reliable solution to fix this alignment problem?
.list {
font-family: sans-serif;
margin: 1rem 0 1rem !important;
}
.checkmark {
transform: rotate(45deg);
height: 24px;
width: 12px;
border-bottom: 7px solid lightgreen;
border-right: 7px solid lightgreen;
}
.crossmark {
height: 24px;
width: 12px;
position:relative;
}
.crossmark::after{
position: absolute;
content: '';
width: 24px;
height: 0px;
border: solid orange;
border-width: 0 0px 7px 0;
transform: rotate(45deg);
top:0;
}
.crossmark::before{
position: absolute;
content: '';
width: 24px;
height: 0px;
border: solid orange;
border-width: 0 0px 7px 0;
transform: rotate(-45deg);
top:0;
}
.highlighted-err {
background-color: red;
color: white;
border-radius: 0.5rem;
padding: 0.5rem;
}
.highlighted-success {
background-color: darkgreen;
color: white;
border-radius: 0.5rem;
padding: 0.5rem;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5855554e494e485b4a7a0f140a10c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row list" id="type-msg">
</div><div class="row list highlighted-success" id="size-msg">
<div class="col-md-1">
<div class="checkmark"></div>
</div><div class="col-md-11">
<div>Image files must be 600 x 450 pixels or larger.</div>
</div>
</div><div class="row list highlighted-err" id="aspect-msg">
<div class="col-md-1">
<div class="crossmark"></div>
</div><div class="col-md-11">
<div>Image files must have a width to height ratio of 3:4.</div>
</div>
</div>