How to group multiple clusters of forms and headers to put on same line and center with responsive design?

Question

I am very new to css and html, and can't seem to find a common sense way to group these elements together so I can put two clusters of forms and headers on the same line. I am trying to implement responsive design with an emphasis on mobile first. Ideally, I would love to have these two clusters of forms centered on the same line with a nice big hyphen in between them.

I have already tried div-ing the start and end times and floating them left and right, but the spacing is wonky. The end top and bottom header line up, while the forms oddly move outside to the right.

h2 {
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
    text-align: left;
    color: gray;
    font-size: 16px;
    font-weight: normal;
    width: 131px;

}

.min, .sec, .hour {
    width: 33px;
    box-sizing: border-box;
    border: 0 solid #ccc;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background: white;
    display: inline-block;

}

h3{
    border-top: 2px solid #ccc;
    width: 131px;
}


*:focus {
    outline: 0;
    box-shadow: none;
}

#start {
float: left;
}


#end {
float: right;
margin: 0;
}

<div id="start" align="middle">

                        <h2 class="start-time">start</h2>
                <div class="time">
                        <form class="hour">
                            <input type="text" size="3" maxlength="3" placeholder="hr">
                        </form>
                        :
                        <form class="min">
                            <input type="text" size="3" maxlength="2" placeholder="min">
                        </form>
                        :
                        <form class="sec">
                            <input type="text" size="3" maxlength="2" placeholder="sec">
                        </form>
                </div>
                        <h3></h3>
            </div>
            
            <div id="stop" align="middle">
                        <h2 class="end-time">end</h2>
                <div class="time">
                        <form class="hour">
                            <input type="text" size="3" maxlength="3" placeholder="hr">
                        </form>
                        :
                        <form class="min">
                            <input type="text" size="3" maxlength="2" placeholder="min">
                        </form>
                        :
                        <form class="sec">
                            <input type="text" size="3" maxlength="2" placeholder="sec">
                        </form>
                </div>
                        <h3></h3>
            </div>

Welcome. Have you searched for an existing answer to your question? If it's not one of these (or the many others), edit your question & explain why existing Q&A don't cut it. . Possible duplicate [CSS two divs next to each other](https://stackoverflow.com/questions/446060/css-two-divs-next-to-each-other), [How to place two divs next to each other?](https://stackoverflow.com/questions/5803023/how-to-place-two-divs-next-to-each-other), [CSS styling - how to put these two div boxes adjacent](https://stackoverflow.com/questions/3540976/css-styling-how-to-put-these-two-div-boxes-adjacent). — Tedinoz, Dec 22 '18 at 06:52

score 0 · Accepted Answer · answered Dec 22 '18 at 06:55

Please check Alex, I think this might help. You just need to add both the divs in a single div and apply display:flex; Hope this will help.

h2 {
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
    text-align: left;
    color: gray;
    font-size: 16px;
    font-weight: normal;
    width: 131px;

}

.min, .sec, .hour {
    width: 33px;
    box-sizing: border-box;
    border: 0 solid #ccc;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background: white;
    display: inline-block;

}

h3{
    border-top: 2px solid #ccc;
    width: 131px;
}


*:focus {
    outline: 0;
    box-shadow: none;
}

#start,
#stop{
float: left;
width: 50%;
}
.wrap {
  display: flex;
  width: 100%;
}

<div class="wrap">
  <div id="start" align="middle">

                          <h2 class="start-time">start</h2>
                  <div class="time">
                          <form class="hour">
                              <input type="text" size="3" maxlength="3" placeholder="hr">
                          </form>
                          :
                          <form class="min">
                              <input type="text" size="3" maxlength="2" placeholder="min">
                          </form>
                          :
                          <form class="sec">
                              <input type="text" size="3" maxlength="2" placeholder="sec">
                          </form>
                  </div>
                          <h3></h3>
              </div>

  <div id="stop" align="middle">
                          <h2 class="end-time">end</h2>
                  <div class="time">
                          <form class="hour">
                              <input type="text" size="3" maxlength="3" placeholder="hr">
                          </form>
                          :
                          <form class="min">
                              <input type="text" size="3" maxlength="2" placeholder="min">
                          </form>
                          :
                          <form class="sec">
                              <input type="text" size="3" maxlength="2" placeholder="sec">
                          </form>
                  </div>
                          <h3></h3>
              </div>
</div>

Thank you my dear friend. You have made my first post on Stack Overflow well worth the time it took to create the account and write the post. What a saint you are!!!!!! — Alex Damis, Dec 23 '18 at 01:58

zer0 · Answer 2 · 2018-12-22T07:12:45.077

Update: I just noticed that you wrapped each of your input elements in a form. Not sure if this is intentional but that shouldn't be the case. You can wrap all of your input elements - start and end included - in one form tag. That would be a well written HTML.

Flex it. Here is a fiddle: http://jsfiddle.net/ydcgpem2/

    <div class="time-container">
  <div id="start" align="middle">
    <h2 class="start-time">start</h2>
      <div class="time">
         <form class="hour">
           <input type="text" size="3" maxlength="3" placeholder="hr">
         </form>
         :
         <form class="min">
            <input type="text" size="3" maxlength="2" placeholder="min">
         </form>
         :
         <form class="sec">
            <input type="text" size="3" maxlength="2" placeholder="sec">
         </form>
      </div>
      <h3></h3>
    </div>
    <div class="hyphen">&#45;</div>
    <div id="stop" align="middle">
       <h2 class="end-time">end</h2>
       <div class="time">
         <form class="hour">
            <input type="text" size="3" maxlength="3" placeholder="hr">
         </form>
         :
         <form class="min">
            <input type="text" size="3" maxlength="2" placeholder="min">
         </form>
         :
         <form class="sec">
             <input type="text" size="3" maxlength="2" placeholder="sec">
         </form>
       </div>
       <h3></h3>
    </div>
</div>

CSS:

.time-container{
  display: flex;
  align-content: middle;
}

.hyphen{
  align-self: center;
  margin: 0 20px;
}

h2 {
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
    text-align: left;
    color: gray;
    font-size: 16px;
    font-weight: normal;
    width: 131px;

}

.min, .sec, .hour {
    width: 33px;
    box-sizing: border-box;
    border: 0 solid #ccc;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background: white;
    display: inline-block;

}

h3{
    border-top: 2px solid #ccc;
    width: 131px;
}


*:focus {
    outline: 0;
    box-shadow: none;
}

How to group multiple clusters of forms and headers to put on same line and center with responsive design?

2 Answers2