CSS: принудительно вставлять элементы друг в друга без родительского элемента. Flex?

Question

Я создаю библиотеку на Ionic, и одно из требований заключается в том, что я НЕ МОГУ добавлять классы и НЕ МОГУ использовать родительские элементы или контейнеры для изменения или доступа к нашим элементам.

Поле поиска с кнопкой должновыглядит как на картинке:

У меня есть только два элемента одного брата:

<ion-button fill="clear">Button</ion-button>
<ion-searchbar clear-icon="close-circle"></ion-searchbar>

Как я могу заставить поле поискачтобы уменьшить его ширину и освободить место для элемента родственной кнопки и кнопки, расположенной справа?

Если бы я мог использовать элемент контейнера, я мог бы легко сделать это с Flexbox, выровнять и выровнять содержимое. Но поскольку это библиотека, мы не знаем, как будет выглядеть родительский элемент, и мы не хотим добавлять новые элементы или заставлять разработчиков полагаться на нежелательный элемент.

Любая помощь будет приветствоваться!

Answer 1

Используйте css:

ion-button {
  float: right;
}

ion-searchbar {
  display: block;
  width: auto;
}

Чтобы это работало, ваша ионная кнопка должна быть первым элементом. Если ваша поисковая панель является первым элементом, просто переключите стили.

Поскольку они оба имеют одинаковую высоту, вам не нужно очищать float

ПРИМЕР:

A {
  float: right;

  /* ignore this */
  height: 50px;
  background: green;
}

B {
  display: block;
  
  /* ignore this */
  height: 50px;
  background: red;
}

<A> Some Text </A>
<B></B>