I can't see why the Search and Clear Buttons wrap onto the following line after Postcode.
I've used the last example from the Button Addons code from here.
https://getbootstrap.com/docs/4.0/components/input-group/.
Whilst I have not included aria-label="Recipient's username" aria-describedby="basic-addon2" as R htmltools doesn't seem to like it, I don't think it's that (as I've tried adding it in the console with no effect).
Although the Bootstrap example doesn't explicitly add the -fluid to container and flex-xl-nowrap to row, I can see their code has it in Console so tried adding it.
I've added background colours to the columns to make it clear where they are.
---
title: "Stack Overflow Bootstrap "
output: html_document
---
## Purpose
Show buttons wrapping when I don't want them to
```{r cars, echo=FALSE}
# Load packages
pacman::p_load(tidyverse, htmltools)
tagList(
htmltools::withTags(
div(class="container-fluid",
h2("Heading 2"),
div(class="row flex-xl-nowrap",
div(class="col-sm-6",
style="background-color:powderblue;",
h3("1st Column Heading 3")),
div(class="col-sm-6",
style="background-color:Cornsilk;",
h3("2nd Column Heading 3"),
div(class="input-group",
input(
type = "text",
class="form-control",
placeholder = "Postcode...",
style = "width: 80px;"
),
div(class="input-group-append",
button(
type = "submit",
class="btn btn-success",
"Search"
),
button(
type = "reset",
class="btn btn-primary",
"Clear"
)
)
)
)
)
)
)
)
```
As @RadovanMiletić pointed out, the answer is to add "display: block", i.e. change
div(class="input-group",
to
div(class="input-group", style = "display: block",