Как сделать заголовок в две строки и логотип справа от первой строки?

Question

[UnseeingQuality]

<div class="header main">

	<div class="site-title">
		<div class="big-logo">
			<img class="graficlogo" src="assets/img/Logo.png" alt="Logo">
		</div>
		<h1 class="main-title">
			мои <br>
			достижения
		</h1>
        </div>
	<p>
	        онлайн-платформа централизации достижений и развития активной деятельности
	</p>

</div>

.header.main{
	margin-top: 10%;
}
.site-title{
	display: flex;
}
.big-logo{
	float: right;
	margin-left: 300px;
	width: 141px;
	height: 136px;
	max-width: 100%;
	height: auto;
}
.graficlogo{
	width: 100%;
	height: auto;
	object-fit: contain;
}
h1.main-title{
	position: relative;
	font-family: 'Neue Machina';
	font-style: normal;
	font-weight: 800;
	font-size: 128px;
	line-height: 95.36px;
	color: #EDFB3A;
}
p{
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
	text-transform: lowercase;
	color: #FFFFFF;
}

Вот так получается:

Вот так должно быть:

Пробовал и через grid b через flex, никак не получается

Comments

[Ankhena]

<h1 class="main-title">
      мои <span class="big-logo"><img class="graficlogo" src="assets/img/Logo.png" alt="Logo"></span><br>
      достижения
    </h1>

Answer 1

[Ankhena]

<h1 class="main-title">
      мои <span class="big-logo"><img class="graficlogo" src="assets/img/Logo.png" alt="Logo"></span><br>
      достижения
</h1>

А, поскольку, это скорее украшение строки, а нормальный логотип уже есть наверху слева, то нет смысла его дублировать как img и можно сократить до:

<h1 class="main-title">
     <span class="main-title__beautiful-string">мои </span>
      достижения
</h1>

.main-title__beautiful-string {
  display: block;
}

.main-title__beautiful-string::after {
  content: "";
  display: inline-block;
  vartical-align: middle;
  bg: иконка
}

Либо флексом.

Answer 2

[v_i_kaisarov]

Ну тут несколько вариантов
1. Переместить img внутрь заголовка

<h1 class="main-title">
      <span>
         мои <img class="graficlogo" src="assets/img/Logo.png" alt="Logo">
      </span>
      <span>достижения</span>
    </h1>

2. Если нельзя менять HTML

.site-title {
  ...
  position: relative;
  ...
}

.big-logo {
  ...
  position: absolute;
  left: 100px; // И тут подогнать сколько надо
  ...
}