How can I adjust this Flexbox layout based on multiple criteria? - html

Question

Current Layout
-------------------
- Banner Row:Group
- Column 1: Label Column 2: Input or Select Column 3: Button or Link
- EndGroup
- Banner Row:Group
- Column 1: Label Column 2: Input or Select Column 3: Button or Link
- EndGroup
- Banner Row:Group
- Column 1: Label Column 2: Input or Select Column 3: Button or Link
- EndGroup
I would like Col1 (label) to be right justified, equal fixed widths
I would like Col2 (input or select) to be same size, fixed width
I would like Col3 (Button or Link) to be left justified
I would like decreasing window width to wrap col component onto next line like at the same time for each column
body {
display: flex;
align-items: center;
justify-content: center;
}
#box {
flex-direction: column;
justify-content: center;
background-color: wheat;
display: flex;
border: 2px solid black;
border-radius: 15px;
border-color: black;
padding: 20px 40px;
margin: 10px 50px;
box-shadow: 5px 10px 18px #888888;
}
#banner {
display: flex;
flex-direction: column;
align-items: center;
background-color: #0099cc;
border-radius: 500px;
padding: 10px 50px 0 50px;
margin: 0 auto 10px auto;
}
#banner-text {
font-size: 14px;
text-align: center;
color: white;
margin-bottom: 15px;
}
.right {
font-size: 10px;
text-align: right;
}
#box input[type="tel"], input[type="email"], select {
font-size: 100%;
margin: 0 10px;
width: 200px;
}
a:link {
font-size: 12px;
font-weight: bold;
text-decoration: none;
align-self: center;
}
a:hover {
text-decoration: underline;
color: blue;
}
.button {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
width: 150px;
border: 2px solid #0099cc;
background-color: #0099cc;
color: #ffffff;
border-radius: 15px;
text-decoration: none;
outline: none;
}
.button:hover {
border: 2px solid white;
color: #ffffff;
padding: 5px 10px;
}
.button:disabled {
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;
}
textarea {
font-size: 18px;
height: 250px;
width: 100%;
}
label {
font-weight: bold;
}
.group {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
<div id="box">
<div id="banner">
<img
src="https://www.google.com/logos/doodles/2020/thank-you-public-health-workers-and-to-researchers-in-the-scientific-community-6753651837108753-law.gif"
alt="Banner"
width="300"
height="92"
/>
<h3>Header Text</h3>
</div>
<div>
<label for="input">Provider:</label>
<select id="selected">
<option value="opt1">Option #1</option>
</select>
https://www.google.com
</div>
<div>
<label for="input">Patient Email:</label>
<input
type="email"
id="email"
name="email"
placeholder="user#domain.com"
/>
<input type="button" class="button" value="Send Email" />
</div>
<div>
<label for="input">Patient Mobile Phone:</label>
<input
type="tel"
id="sms"
name="sms"
placeholder="[phone]"
/>
<input type="button" class="button" value="Send SMS Text" />
</div>
</div>
JSFiddle

Answer 1

Here's a possibility for you. Based on what you were saying you wanted, it seemed to me that css grid was the better option.
So, I added css grid with grid-template-columns: max-content max-content 1fr; as the columns and it'll add new rows as you create them.
I made the wrapping divs (.grid>div) use display: contents although it isn't fully supported on all major browsers yet, the way to get around using that would be to just remove the wrapping divs as grid will take care of the rest anyway.
body {
display: flex;
align-items: center;
justify-content: center;
}
#box {
flex-direction: column;
justify-content: center;
background-color: wheat;
display: flex;
border: 2px solid black;
border-radius: 15px;
border-color: black;
padding: 20px 40px;
margin: 10px 50px;
box-shadow: 5px 10px 18px #888888;
}
#banner {
display: flex;
flex-direction: column;
align-items: center;
background-color: #0099cc;
border-radius: 500px;
padding: 10px 50px 0 50px;
margin: 0 auto 10px auto;
}
#banner-text {
font-size: 14px;
text-align: center;
color: white;
margin-bottom: 15px;
}
.right {
font-size: 10px;
text-align: right;
}
#box input[type="tel"],
input[type="email"],
select {
font-size: 100%;
margin: 0 10px;
/*width: 200px;*/
}
a:link {
font-size: 12px;
font-weight: bold;
text-decoration: none;
align-self: center;
}
a:hover {
text-decoration: underline;
color: blue;
}
.button {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
width: 150px;
border: 2px solid #0099cc;
background-color: #0099cc;
color: #ffffff;
border-radius: 15px;
text-decoration: none;
outline: none;
}
.button:hover {
border: 2px solid white;
color: #ffffff;
padding: 5px 10px;
}
.button:disabled {
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;
}
textarea {
font-size: 18px;
height: 250px;
width: 100%;
}
label {
font-weight: bold;
}
.group {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.grid {
display: grid;
grid-template-columns: max-content max-content 1fr;
}
.grid>div {
display: contents;
}
.grid>div>:first-child {
justify-self: flex-end;
}
#media only screen and (max-width: 600px) {
.grid {
grid-template-columns: 1fr;
}
.grid>div>:first-child {
justify-self: flex-start;
}
}
<div id="box">
<div id="banner">
<img src="https://www.google.com/logos/doodles/2020/thank-you-public-health-workers-and-to-researchers-in-the-scientific-community-6753651837108753-law.gif" alt="Banner" width="300" height="92" />
<h3>Header Text</h3>
</div>
<div class="grid">
<div>
<label for="input">Provider:</label>
<select id="selected">
<option value="opt1">Option #1</option>
</select>
https://www.google.com
</div>
<div>
<label for="input">Patient Email:</label>
<input type="email" id="email" name="email" placeholder="user#domain.com" />
<input type="button" class="button" value="Send Email" />
</div>
<div>
<label for="input">Patient Mobile Phone:</label>
<input type="tel" id="sms" name="sms" placeholder="[phone]" />
<input type="button" class="button" value="Send SMS Text" />
</div>
</div>
</div>