CSS横並びを実装したいがdisplay: flex;指定してもできない

キャプチャの青ボタンとTestというテキストを横並びにしたいのですが、実現できません。
どう修正したらよいか分からないのですが、教えていただけないでしょうか

CSS

1body {2 background-color: white;3 4}5 6.line {7 display: flex;8}9 10.message {11 padding-left: 750px12}13 14.NTDbutton {15 position: relative;16 top: 700px;17 left: 850px;18 display: inline-block;19 padding: 1.5em 2.9em;20 margin: 100px;21 text-decoration: none;22 color: rgb(248, 246, 246);23 background: #03acf4;24 border: solid 1px #0fabda;25 border-radius: 4px;26 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);27 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);28}

App.js

1import './App.css'; 2import NewTweetDrawer from './componets/NewTweetDrawer'; 3import Tweet from './componets/Tweet'; 4import TweetFloatingButton from './componets/TweetFloatingButton'; 5import TimeLine from './componets/TimeLine'; 6import React, { useRef } from "react"; 7 8function App() { 9 return ( 10 <div className="App"> 11 <header className="App-header"> 12 13 <NewTweetDrawer className="NTDbutton" /> 14 <Tweet /> 15 <TimeLine /> 16 <TweetFloatingButton /> 17 18 </header> 19 </div> 20 ); 21} 22 23export default App; 24

function TweetLine() { return ( <div className="line"> <p className="message">Test</p> </div> ); } export default TweetLine;

function TweetFloatingButton() { return ( <div className="line"> <button className="NTDbutton" ><i class="fa-light fa-pen-nib"></i></button> </div> ); } export default TweetFloatingButton;