[問題] 新手CSS問題請益

[james999 (無傷大雅)]

最近想要做一簡單的網頁，
閱讀過相關CSS的資料，
但實際要應用卻遇到困難..

紅色部份為一logo，
右邊綠色部份為二個input Text，
黑色部份為一字串，
紅色上標下標相等於2個綠色的上標下標，
黑色則在上述元件下方。
https://imgur.com/a/a4MZz

請板友提供些指引，謝謝:)

p.s. 主要是不曉得綠和紅中間的空白該怎麼辦
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.230.197.165
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1515717018.A.84E.html

※ 編輯: james999 (61.230.197.165), 01/12/2018 08:35:23
推 diabloevagto: Flexbox
→ sanyaoooo: 所以你希望呈現什麼樣子？
→ sanyaoooo: 抱歉我誤會了XD 不要理我
→ james999: 希望能用CSS3就能達成@@
→ james999: 沒辦法加裝額外套件！
推 lovetoshinya: 先上下兩個div 上面再切2個div用flexbox定logo跟inp
→ lovetoshinya: ut 黑色用p下置中就好
推 idareyou: 最快的解法是用table 左右兩個元素都固定寬度
→ idareyou: 考慮到手機板會使用display:table來模擬
→ idareyou: flexbox是對的，但不是最正確的(可悲的舊IE用戶)
推 idareyou: https://jsfiddle.net/kos0616/3wbr9v2u/1/
推 idareyou: https://jsfiddle.net/kos0616/05ooeq55/ divTable
→ idareyou: 但我還是建議用flexbox
→ Rinorune: 比較快就input絕對定位 右上 右下
→ Rinorune: https://jsfiddle.net/zcjy7k39/
→ james999: 謝謝大家，感謝R大的教學:)
不明白為何我套用後結果和R大給的不一樣@@
https://imgur.com/a/5raSx
※ 編輯: james999 (61.230.197.165), 01/12/2018 22:14:31
→ sanyaoooo: 如果圖我沒看錯的話，R大是放在<header>，不是放在<hea
→ sanyaoooo: d>，兩個是不一樣的喔
推 lovetoshinya: 你的標籤跟內容全部都要放在body裡面才對
→ james999: 唉呀 謝謝兩位 可以正常顯示了 我真粗心 冏
想再請問一下... 如果希望在兩個input前面加上說明文字如：name: 的話，
該如何加呢? 剛剛不管怎麼加字都會在圖片下方...
※ 編輯: james999 (61.230.196.117), 01/14/2018 16:02:16
推 lovetoshinya: <span>name :<input></input></span>
→ james999: span依舊無法 字會出現在圖片下方Orz
→ james999: 還是得像input一定 強迫定位在input的前方之類的@@?
→ sanyaoooo: 因為input是用absolute，我直接改在R大的範例網址
→ sanyaoooo: https://jsfiddle.net/zcjy7k39/1/
→ sanyaoooo: 建議把範例中的CSS弄清楚，有問題才知道是出在哪裡