Html 如何使用SVG和文本创建两列，使文本始终保持在SVG的右侧？

我有两个带有SVG和一些文本的专栏。当我在GoogleChrome上缩小窗口时，文本会在窗口小于600px之前下降到SVG的下方。在确保两列在浏览器两侧之间具有恒定的边距的同时，如何防止这种情况发生

HTML:

<div class="containerx">
    <div class="rowx">
    <div class="colx">
<svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l616.40155 0l0 615.51447l-616.40155 0l0 -615.51447z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l616.40155 0l0 615.51447l-616.40155 0z" fill-rule="evenodd"></path><path fill="#efefef" d="m0 307.68503l0 0c0 -169.92975 137.75528 -307.68503 307.68503 -307.68503l0 0c81.60315 0 159.86404 32.416725 217.5662 90.11886c57.70215 57.70214 90.118835 135.96304 90.118835 217.56616l0 0c0 169.92978 -137.75525 307.68503 -307.68503 307.68503l0 0c-169.92975 0 -307.68503 -137.75525 -307.68503 -307.68503z" fill-rule="evenodd"></path><path fill="#ff9300" d="m145.55905 201.67563l0 0c0 -29.847168 24.195908 -54.043076 54.043076 -54.043076l216.16582 0l0 0c14.33313 0 28.079193 5.693802 38.214233 15.828842c10.13504 10.13504 15.828857 23.881119 15.828857 38.214233l0 216.1658c0 29.847168 -24.195923 54.04309 -54.04309 54.04309l-216.16582 0c-29.847168 0 -54.043076 -24.195923 -54.043076 -54.04309z" fill-rule="evenodd"></path><path fill="#ffb738" d="m277.81104 129.62225l0 0c0 -5.499771 4.458435 -9.958214 9.958191 -9.958214l39.831635 0l0 0c2.6410828 0 5.1739807 1.0491638 7.041504 2.9166946c1.8675232 1.8675232 2.916687 4.400429 2.916687 7.041519l0 151.01273c0 5.499756 -4.458435 9.958191 -9.958191 9.958191l-39.831635 0c-5.499756 0 -9.958191 -4.458435 -9.958191 -9.958191z" fill-rule="evenodd"></path><path fill="#ffffff" d="m369.55905 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7244263 0l0 26.0l-15.4487915 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m403.27682 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7243958 0l0 26.0l-15.448822 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#efefef" d="m272.4567 119.66404l70.456696 0l0 27.968513l-70.456696 0z" fill-rule="evenodd"></path></g></svg>
      <h2 class="textthing">Fast Shipping</h2>
      </div>
      <div class="colx">
<svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l616.40155 0l0 615.51447l-616.40155 0l0 -615.51447z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l616.40155 0l0 615.51447l-616.40155 0z" fill-rule="evenodd"></path><path fill="#efefef" d="m0 307.68503l0 0c0 -169.92975 137.75528 -307.68503 307.68503 -307.68503l0 0c81.60315 0 159.86404 32.416725 217.5662 90.11886c57.70215 57.70214 90.118835 135.96304 90.118835 217.56616l0 0c0 169.92978 -137.75525 307.68503 -307.68503 307.68503l0 0c-169.92975 0 -307.68503 -137.75525 -307.68503 -307.68503z" fill-rule="evenodd"></path><path fill="#ff9300" d="m145.55905 201.67563l0 0c0 -29.847168 24.195908 -54.043076 54.043076 -54.043076l216.16582 0l0 0c14.33313 0 28.079193 5.693802 38.214233 15.828842c10.13504 10.13504 15.828857 23.881119 15.828857 38.214233l0 216.1658c0 29.847168 -24.195923 54.04309 -54.04309 54.04309l-216.16582 0c-29.847168 0 -54.043076 -24.195923 -54.043076 -54.04309z" fill-rule="evenodd"></path><path fill="#ffb738" d="m277.81104 129.62225l0 0c0 -5.499771 4.458435 -9.958214 9.958191 -9.958214l39.831635 0l0 0c2.6410828 0 5.1739807 1.0491638 7.041504 2.9166946c1.8675232 1.8675232 2.916687 4.400429 2.916687 7.041519l0 151.01273c0 5.499756 -4.458435 9.958191 -9.958191 9.958191l-39.831635 0c-5.499756 0 -9.958191 -4.458435 -9.958191 -9.958191z" fill-rule="evenodd"></path><path fill="#ffffff" d="m369.55905 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7244263 0l0 26.0l-15.4487915 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m403.27682 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7243958 0l0 26.0l-15.448822 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#efefef" d="m272.4567 119.66404l70.456696 0l0 27.968513l-70.456696 0z" fill-rule="evenodd"></path></g></svg>
      <h2 class="textthing">Fast Shipping</h2>
      </div>
    </div>
    </div>

  .boxicon {
    height: 150px;
    float: left;
    margin: 5px;
  }

  .textthing {
    float: left;
    text-align: center;
    padding-top: 48px;
    margin-left: 20px;
  }

  .containerx {

  }

  .rowx {
    width: 95%;

  }

  .colx {
    width: 45%;
    float: left;
    background-color: #000;
    margin-left: 5%
  }

  @media screen and (max-width: 600px) {
    .colx {
      width: 100%;
      margin-bottom: 5px;
    }
  }

完整代码：

所需布局：

电流输出：

---

为了更好地控制对齐和定位，我建议从盒式模式切换到flex模式：

.boxicon{
高度：150像素；
保证金：5px；
}
.短信{
文本对齐：居中；
显示：块；
利润率：10px；
颜色：白色；
柔性生长：1；
}
.罗克斯{
显示器：flex；
}
科尔克斯先生{
柔性生长：1；
显示器：flex；
对齐项目：居中；
背景色：#000；
利润率：0.15px；
填充：10px；
}
@媒体屏幕和屏幕（最大宽度：600px）{
科尔克斯先生{
利润率：10px 15px；
}
.罗克斯{
弯曲方向：立柱；
}

快速运输
快速运输