CodePudding user response：
You can wrap a container element around the whole content which has display: flex. That way the two child elements will remain side by side. You should then also add flex-shrink: 0; to the div that contains the image to keep its defined width (and not shrink):
.container {
display: flex;
}
.n-marker {
width: 3rem;
height: 3rem;
flex-shrink: 0;
}<div class="container">
<div class="n-marker"><svg fill="#054B71" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 102.34 256.49">
<path d="M50.653 1.165c-4.83.223-6.992 3.18-7.479 4.315-.519 1.211-7.615 11.779-7.615 11.779l-4.315 5.707v.258c-.77 1.196-1.826 2.948-2.256 4.239-.692 2.076-.697 2.24-.697 2.24l-.514 2.257 1.044-.863.863-2.938 1.59-4.087c.04 1.236.103 3.606-.03 5.465-.173 2.423-1.908 4.497-1.908 4.497v5.193s-.517.865-2.074 1.21c-1.557.347-2.074.005-.863.697 1.211.692 1.726.515 1.726.515l-1.56 3.285s-5.02 5.19-6.404 6.92c-1.384 1.73-12.626 13.671-12.626 13.671S.783 72.963.783 76.078c0 3.114 3.285 5.89 3.285 5.89s10.565 13.148 11.43 14.186c.865 1.038 1.207 3.986 1.726 7.1.52 3.115 7.268-2.77 7.268-2.77s1.732 1.555 2.77 2.074c1.038.519 2.59-.697 2.59-.697s.354 7.618.18 9.175c-.172 1.557-.702 14.701-.53 25.602.174 10.9-7.085 47.766-7.085 47.766l6.92 1.726s-.874 5.535-.182 11.764c.692 6.229 4.844 25.783 4.844 25.783l.53 8.993-.696.349-.697 2.256.182 2.074s-.87 2.422-.696 4.844c.173 2.423 1.044 4.149 1.044 4.149s.333 3.11 1.545 5.36c1.21 2.249 7.1 3.633 7.1 3.633l3.467-.167-1.559-7.615-.696-2.937s-.349-4.161-.349-8.66c0-4.499-2.243-9.863-2.589-14.535-.346-4.672 1.04-9.335 1.56-14.353.519-5.018 1.211-19.379 1.211-19.379s8.124.509 15.564.682c7.44.173 14.02-.863 14.02-.863s.337 4.853 1.029 8.66c.692 3.806 2.433 7.431 2.952 9.508l3.982 15.927-.53 8.826s-3.09 4.832-2.589 7.086c.346 1.557 2.075 4.496 2.075 4.496l.166 9.872 1.211.68s-.173-8.302 0-9.34c.173-1.039.872-.336 2.256.53 1.384.865 1.735 8.132 1.908 9.689.173 1.557 4.315 1.892 4.315 1.892l11.43-.68-7.1-5.542s-1.212-3.802-1.212-5.36c0-1.557-.696-6.759-.696-7.797 0-1.038-.508-2.94-.682-4.496-.173-1.558-1.559-10.038-1.559-10.038s-.342-30.615-.515-32.173c-.173-1.557-.696-4.678-.696-4.678l2.937-1.045s-2.076-7.611-2.422-9.341c-.346-1.73-1.722-10.728-3.452-21.802s-10.038-39.44-10.038-39.44v-6.056l1.03.166s-.349-4.323-.349-6.919c0-2.595-2.589-12.46-2.589-12.46s-.348-2.768-.348-3.633c0-.865 1.045-3.8 1.045-3.8s4.323 7.611 6.919 6.919c5.391-1.438 8.824-4.334 7.267-20.772-1.864-19.675-4.497-26.465-4.497-26.465l-6.237-1.56c-2.077-.519-7.949-2.77-7.949-2.77l.682-1.908.53-3.633 1.892 2.422-1.378-3.8.515-1.908-.696-2.422s-.513-3.46-1.378-6.056c-.865-2.596-3.294-7.092-5.89-10.553-2.595-3.46-7.09-6.397-12.626-6.57a12.95 12.95 0 0 0-1 0zm19.682 21.802.878 1.726.334 2.256-.863 1.544-.349-4.148v-1.378zm-31.309 2.24-1.559 3.286-2.422 1.56 1.907-3.453 2.074-1.393zm30.628 4.33v4.497l-.348.863-1.393-.681.878-2.09.863-2.588zm-35.988 3.8-.878 2.771-1.544 1.045.863-2.074 1.559-1.741zM34 36.639l.348 1.893-2.24.53 1.892-2.423zm-4.723 26.253a.947.947 0 0 1 .757.394c1.038 1.384 3.8 8.993 3.8 8.993l2.77 7.086 1.56 3.633v4.678l-1.56.349-6.056 6.404s-3.813-5.716-5.89-7.1c-2.075-1.385-5.015-3.983-5.707-5.194-.692-1.21-3.809-4.492-2.77-6.222 1.038-1.73 4.498-7.96 7.267-9.69 2.25-1.406 4.507-3.381 5.829-3.33z"></path>
</svg></div>
<div class="n-list-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>CodePudding user response：
You could make your float layout adding floatto the text and ´calc´ in width propertie as your image has a fixed one:
.n-float-left {
float: left;
}
.n-marker {
width: 3rem;
height: 3rem;
}
.n-list-text {
float: left;
width:calc(100% - 3rem);
}<div class="n-marker n-float-left"><svg fill="#054B71" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 102.34 256.49">
<path d="M50.653 1.165c-4.83.223-6.992 3.18-7.479 4.315-.519 1.211-7.615 11.779-7.615 11.779l-4.315 5.707v.258c-.77 1.196-1.826 2.948-2.256 4.239-.692 2.076-.697 2.24-.697 2.24l-.514 2.257 1.044-.863.863-2.938 1.59-4.087c.04 1.236.103 3.606-.03 5.465-.173 2.423-1.908 4.497-1.908 4.497v5.193s-.517.865-2.074 1.21c-1.557.347-2.074.005-.863.697 1.211.692 1.726.515 1.726.515l-1.56 3.285s-5.02 5.19-6.404 6.92c-1.384 1.73-12.626 13.671-12.626 13.671S.783 72.963.783 76.078c0 3.114 3.285 5.89 3.285 5.89s10.565 13.148 11.43 14.186c.865 1.038 1.207 3.986 1.726 7.1.52 3.115 7.268-2.77 7.268-2.77s1.732 1.555 2.77 2.074c1.038.519 2.59-.697 2.59-.697s.354 7.618.18 9.175c-.172 1.557-.702 14.701-.53 25.602.174 10.9-7.085 47.766-7.085 47.766l6.92 1.726s-.874 5.535-.182 11.764c.692 6.229 4.844 25.783 4.844 25.783l.53 8.993-.696.349-.697 2.256.182 2.074s-.87 2.422-.696 4.844c.173 2.423 1.044 4.149 1.044 4.149s.333 3.11 1.545 5.36c1.21 2.249 7.1 3.633 7.1 3.633l3.467-.167-1.559-7.615-.696-2.937s-.349-4.161-.349-8.66c0-4.499-2.243-9.863-2.589-14.535-.346-4.672 1.04-9.335 1.56-14.353.519-5.018 1.211-19.379 1.211-19.379s8.124.509 15.564.682c7.44.173 14.02-.863 14.02-.863s.337 4.853 1.029 8.66c.692 3.806 2.433 7.431 2.952 9.508l3.982 15.927-.53 8.826s-3.09 4.832-2.589 7.086c.346 1.557 2.075 4.496 2.075 4.496l.166 9.872 1.211.68s-.173-8.302 0-9.34c.173-1.039.872-.336 2.256.53 1.384.865 1.735 8.132 1.908 9.689.173 1.557 4.315 1.892 4.315 1.892l11.43-.68-7.1-5.542s-1.212-3.802-1.212-5.36c0-1.557-.696-6.759-.696-7.797 0-1.038-.508-2.94-.682-4.496-.173-1.558-1.559-10.038-1.559-10.038s-.342-30.615-.515-32.173c-.173-1.557-.696-4.678-.696-4.678l2.937-1.045s-2.076-7.611-2.422-9.341c-.346-1.73-1.722-10.728-3.452-21.802s-10.038-39.44-10.038-39.44v-6.056l1.03.166s-.349-4.323-.349-6.919c0-2.595-2.589-12.46-2.589-12.46s-.348-2.768-.348-3.633c0-.865 1.045-3.8 1.045-3.8s4.323 7.611 6.919 6.919c5.391-1.438 8.824-4.334 7.267-20.772-1.864-19.675-4.497-26.465-4.497-26.465l-6.237-1.56c-2.077-.519-7.949-2.77-7.949-2.77l.682-1.908.53-3.633 1.892 2.422-1.378-3.8.515-1.908-.696-2.422s-.513-3.46-1.378-6.056c-.865-2.596-3.294-7.092-5.89-10.553-2.595-3.46-7.09-6.397-12.626-6.57a12.95 12.95 0 0 0-1 0zm19.682 21.802.878 1.726.334 2.256-.863 1.544-.349-4.148v-1.378zm-31.309 2.24-1.559 3.286-2.422 1.56 1.907-3.453 2.074-1.393zm30.628 4.33v4.497l-.348.863-1.393-.681.878-2.09.863-2.588zm-35.988 3.8-.878 2.771-1.544 1.045.863-2.074 1.559-1.741zM34 36.639l.348 1.893-2.24.53 1.892-2.423zm-4.723 26.253a.947.947 0 0 1 .757.394c1.038 1.384 3.8 8.993 3.8 8.993l2.77 7.086 1.56 3.633v4.678l-1.56.349-6.056 6.404s-3.813-5.716-5.89-7.1c-2.075-1.385-5.015-3.983-5.707-5.194-.692-1.21-3.809-4.492-2.77-6.222 1.038-1.73 4.498-7.96 7.267-9.69 2.25-1.406 4.507-3.381 5.829-3.33z"></path>
</svg></div>
<div class="n-list-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>